Shulou(Shulou.com)05/31 Report--

This article mainly explains "vue skillfully uses the method of transition effect", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "vue's skillful use of transition effect".

Concept

During the entry / exit transition, there will be 6 class switches, so take an official picture.

V-enter: defines the starting state of the transition. It takes effect before the element is inserted and removed at the next frame after the element is inserted.

V-enter-active: defines the state when the transition takes effect. Applied throughout the transition phase, effective before the element is inserted and removed after the transition / animation is complete. This class can be used to define the process time, delay, and curve functions for entering the transition.

V-enter-to: the definition of version 2.1.8 and above enters the end of the transition. The next frame takes effect after the element is inserted (while the v-enter is removed) and removed after the transition / animation is complete.

V-leave: defines the start state of leaving the transition. It takes effect immediately when the departure transition is triggered, and the next frame is removed.

V-leave-active: defines the state when the transition takes effect. Applied throughout the phase of leaving the transition, it takes effect as soon as the leaving transition is triggered and removed after the transition / animation is complete. This class can be used to define the process time, delay, and curve functions that leave the transition.

V-leave-to: the definition of version 2.1.8 and above leaves the end state of the transition. The next frame takes effect after the departure transition is triggered (while the v-leave is deleted) and removed after the transition / animation is complete.

It still looks a little messy. Let's get this straight.

The enter definition starts the state, the active definition process, and the enter definition ends, but there is an intersection in the actual process. Through the breakpoint, you can find

Add v-enter

Add v-enter-active

Uninstall v-enter

Add v-ernter-to

Uninstall v-enter-to and v-enter-active

/ / transition: all 2s; .move-enter {margin-left: 0;} .move-enter-active {margin-left: 100px;} .move-enter-to {margin-left: 200px;}

For example, in the above case, how does the transition animation work?

Two points should be paid attention to here.

Enter-active overrides the starting point of enter.

After a total of two transitions, the enter-to starts after the end of the active, so the fourth second returns to the position of the dom element itself.

So the official document also uses v-enter to define the starting point and control the effect in enter-active.

Using class to realize the transition effect

Above these 6 class, we can use transition or animation to achieve the effect we need. Take Chestnut, for example, here we directly define a transition effect for all routing changes.

The appear attribute indicates that the page is also suitable for animation when it is loaded for the first time

@ keyframes animationIn {0% {transform: translate (- 100%, 0);} 100% {transform: translate (0,0);}} @ keyframes animationOut {0% {transform: translate (0,0);} 100% {transform: translate (100%, 0);}}. Move-enter {transform: translate (- 100%, 0); position: important; z-index: 999; top: 0; left: 0; width: 100%;} .move-enter-active {animation: animationIn 0.2s Position: components imported to overwrite removed components. Refer to / / https://cn.vuejs.org/v2/guide/transitions.html#%E8%BF%87%E6%B8%A1%E6%A8%A1%E5%BC%8F z-index: 999; top: 0; left: 0; width: 100%;} .move-leave {transform: translate (0,0);} .move-leave-active {animation: animationOut 0.2s;}

Effect.

JavaScript hook

These hook functions can be used in conjunction with CSS transitions/animations

In these hooks, you can use other third-party libraries. The el in the callback will be the real dom element, such as Chestnut. Here, the officially recommended Velocity.js is used as the animation library.

Toggle methods: {start () {this.show =! this.show}, handleBeforeEnter: function (el) {el.style.opacity = 0; console.log ('Square display animation is about to be executed');}, handleEnter: function (el, done) {Velocity (el, 'stop') Velocity (el, {backgroundColor:'# 0085ebaked, opacity: 1, translateX: 260, rotateZ: ['360 degassing, 0]}, {duration: 1000, easing: [0.4,0.01,0.99], complete: done}); console.log (' square display animation in progress');}, handleAfterEnter: function (el) {console.log ('box display animation end') }, handleBeforeLeave: function (el) {console.log ('Box Hidden Animation is about to be executed');}, handleLeave: function (el, done) {Velocity (el, 'stop') Velocity (el, {backgroundColor:'# 4dd0e1animation, opacity: 0, translateX: 0, rotateZ: [0, '360deg']}, {duration: 1000, easing: [0.4,0.01,0.99], complete: done}); console.log (' Box Hidden Animation is running...);}, handleAfterLeave: function (el) {console.log ('end of Box Hidden Animation');}

List transition

Vue also provides a transition-group component as a container for list transitions

Instead, it is rendered as a real element: the default is one. You can also change to other elements through the tag feature.

Transition-group has a special v-move attribute, which will be used in the process of changing the position of the element. The effect can be found on the official website.

The rest will not copy the official website.

In the list transition, you can combine js hooks to achieve some special effects

Take a chestnut.

Adding sort / / the data-index here is an identification, which makes it easy to get the sequence number of the current element {{I}} import Vue from "vue" in the js hook; export default Vue.extend ({name: "home", data () {return {show: true, list: [5, 4, true, 2], nextNum: 6} }, methods: {showDom () {this.show =! this.show}, beforeEnter: function (el: any) {el.style.opacity = 0 / / before each element is inserted, the transparency is 0 let index = el.dataset.index may insert multiple elements at a time, / / the page loads with 5 if (index)

< 5) { //设置动画延迟， 实现按续插入的效果 el.style.animationDelay = el.dataset.index * 0.3 + 's' } }, afterEnter: function (el) { el.style.opacity = 1 console.log('afterEnter') }, addItem() { this.list.push(this.nextNum++) }, sort() { this.list = this.list.sort((a, b) =>

A-b)}); @ keyframes animat {0% {margin-left: 300px; opacity: 0;} 100% {margin-left: 0; opacity: 1;}} .fade-enter {opacity: 0; margin-left: 300px;} .fade-enter-active {opacity: 0; animation: animat 1s;} .fade-enter-to {opacity: 1; margin-left: 0;} .fade-move {transition: all 0.3s } .fade-leave {left: 10px;} .fade-leave-active {transition: all 2s ease-out;} .fade-leave-to {left:-100%;}

Effect.

At this point, I believe you have a deeper understanding of "vue skillfully using the method of transition effect". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.