Transition and animation are required for Vue. js every day, and transition animation for vue. js

Transition and animation are required for Vue. js every day, and transition animation for vue. js

With the transition system of Vue. js, You can automatically apply the transition effect when an element is inserted or removed from the DOM. Vue. js will trigger CSS transition or animation at an appropriate time. You can also provide the JavaScript hook function to execute custom DOM operations during the transition process.

To apply the transition effect, you need to use the transition feature on the target element:

<Div v-if = "show" transition = "my-transition"> </div>

The transition feature can be used with the following resources:
• V-if
• V-show
• V-for (triggered only during insertion and deletion, using the vue-animated-list plug-in)
• Dynamic components (see components for introduction)
• On the root node of the component and triggered by the DOM method of the Vue instance (such as vm. $ appendTo (el.

When an element with transition is inserted or deleted, Vue will:
1. Try to use ID "my-transition" to find the JavaScript transition hook object -- register through Vue. transition (id, hooks) or transitions options. If found, the corresponding hooks will be called at different stages of the transition.

2. Automatically sniff whether the target element has CSS transition or animation, and add/Delete the CSS class name when appropriate.

3. If no JavaScript hook is found and no CSS transition/animation is detected, the DOM operation (insert/delete) is immediately executed in the next frame.

CSS transition

Example

The typical CSS transition is like this:

<Div v-if = "show" transition = "expand"> hello </div>
Then add CSS rules for '. expand-transition', '. expand-enter', and'. expand-leave:

/* Required */. expand-transition {transition: all. 3 s rows; height: 30px; padding: 10px; background-color: # eee; overflow: hidden ;}/*. expand-enter defines the start status *//*. expand-leave defines the end state of exit */. expand-enter ,. expand-leave {height: 0; padding: 0 10px; opacity: 0 ;}

You can achieve different transitions on the same element through dynamic binding:
<Div v-if = "show": transition = "transitionName"> hello </div>

new Vue({ el: '...', data: {  show: false,  transitionName: 'fade' }})

In addition, JavaScript hooks can be provided:

Vue.transition('expand', { beforeEnter: function (el) {  el.textContent = 'beforeEnter' }, enter: function (el) {  el.textContent = 'enter' }, afterEnter: function (el) {  el.textContent = 'afterEnter' }, enterCancelled: function (el) {  // handle cancellation }, beforeLeave: function (el) {  el.textContent = 'beforeLeave' }, leave: function (el) {  el.textContent = 'leave' }, afterLeave: function (el) {  el.textContent = 'afterLeave' }, leaveCancelled: function (el) {  // handle cancellation }})

CSS class name for Transition

The addition and switching of class names depend on the value of the transition feature. For example, transition = "fade" has three CSS class names:
1. fade-transition is always retained on the element.

2. fade-enter defines the starting state of transition. Apply only one frame and delete it immediately.

3. fade-leave defines the end state of the exit transition. It takes effect upon departure from the transition and is deleted after it is completed.

If the transition feature has no value, the default class names are. v-transition,. v-enter, and. v-leave.

Custom transition class name

1.0.14 added
We can declare the custom CSS transition class name in the JavaScript definition of transition. These custom class names will overwrite the default class names. It is useful when used with third-party CSS animation libraries, such as Animate.css:

<Div v-show = "OK" class = "animated" transition = "bounce"> Watch me bounce </div>

Vue.transition('bounce', { enterClass: 'bounceInLeft', leaveClass: 'bounceOutRight'})

Explicitly declare the CSS transition type

1.0.14 added

Vue. js needs to add an event listener to the transition element to listen on when the transition ends. Based on the CSS used, the event is either transitionend or animationend. If you only use one of the two types, Vue. js will be able to automatically deduce the corresponding event type according to the effective CSS rules. However, in some cases, the next element may need two types of animation at the same time. For example, you may want Vue to trigger a CSS animation, and this element has the CSS transition effect when the mouse is suspended. In this case, you need to explicitly declare the animation type (animation or transition) You want the Vue to process ):

Vue. transition ('bounce ', {// This effect will only listen on 'animate' event type: 'animate '})

Transition process details

When the show attribute is changed, Vue. js inserts or deletes the <div> element accordingly and changes the name of the Transition CSS class according to the following rules:
• If show changes to false, Vue. js will:
1. Call the beforeLeave hook;
2. Add the v-leave class name to the element to trigger the transition;
3. Call the leave Hook;
4. Wait until the transition ends (listen for the transitionend event );
5. Delete the element from the DOM and delete the v-leave class name;
6. Call the afterLeave hook.

• If show becomes true, Vue. js will:
1. Call the beforeEnter hook;
2. Add the v-enter Class Name To the element;
3. insert it into the DOM;
4. Call the enter hook;
5. Force a CSS layout to make v-enter take effect. Then, delete the v-enter Class Name to trigger the transition and return to the original state of the element;
6. Wait until the end of the transition;
7. Call the afterEnter hook.

In addition, if you delete an element while its entry transition is still in progress, you will call the enterCancelled hook to clear the timer created by the change or enter. This is also true for the departure transition.

When all the hook functions above are called, their this points to the Vue instance to which they belong. Compilation rules: the context in which the transition is compiled, and the context in which this is directed.

Finally, enter and leave can have the second optional callback parameter to explicitly control how the transition ends. Therefore, you do not have to wait for the CSS transitionend event. Vue. js will wait for you to manually call this callback to end the transition. For example:

Enter: function (el) {// There is no second parameter. // the CSS transitionend event determines when the transition ends}

Vs.

Enter: function (el, done) {// there is a second parameter. // The transition only ends when 'done' is called}

<P class = "tip">When multiple elements are transitioned together, Vue. js will process them in batches and only force the layout once.

CSS Animation

The usage of CSS animation is the same as that of CSS transition. The difference is that in the animation, the v-enter Class name will not be deleted immediately after the node is inserted into the DOM, but will be deleted when the animationend event is triggered.

Example: (the compatibility prefix is omitted)

<Span v-show = "show" transition = "bounce"> Look at me! </Span>. bounce-transition {display: inline-block;/* Otherwise the scale animation does not work */}. bounce-enter {animation: bounce-in. 5 s ;}. bounce-leave {animation: bounce-out. 5 s ;}@ keyframes bounce-in {0% {transform: scale (0);} 50% {transform: scale (1.5);} 100% {transform: scale (1) ;}@ keyframes bounce-out {0% {transform: scale (1);} 50% {transform: scale (1.5);} 100% {transform: scale (0 );}}

JavaScript transition

You can also use JavaScript hooks without defining any CSS rules. When only JavaScript is used for transition, the enter and leave hooks need to call the done callback. Otherwise, they will be synchronously called and the transition will end immediately.

It is a good idea to explicitly declare css: false for JavaScript transition. Vue. js will skip CSS detection. This will also prevent unintentional interference with the transition of CSS rules.

In the following example, we use jQuery to register a custom JavaScript transition:

Vue. transition ('fade ', {css: false, enter: function (el, done) {// The element has been inserted into the DOM // call done $ (el) after the animation ends ). css ('opacity ', 0 ). animate ({opacity: 1}, 1000, done)}, enterCancelled: function (el) {$ (el ). stop ()}, leave: function (el, done) {// same as enter $ (el ). animate ({opacity: 0}, 1000, done)}, leaveCancelled: function (el) {$ (el ). stop ()}})

Use the transition feature:

<P transition = "fade"> </p>

Gradual transition

When transition and v-for are used together, an incremental transition can be created. Add a feature stagger, enter-stagger or leave-stagger to the transition element:

<Div v-for = "item in list" transition = "stagger" stagger = "100"> </div>

Alternatively, provide a hook stagger, enter-stagger or leave-stagger for better control:

Vue. transition ('stagger ', {stagger: function (index) {// increase Latency by 50 ms for each transition project // but the maximum latency is 300 ms return Math. min (300, index * 50 )}})

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.