Let's talk about the transition effect of Vue. js and the transition effect of Vue. js.

Let's talk about the transition effect of Vue. js and the transition effect of Vue. js.

With the transition system of Vue. js, you can easily add transition animation effects to the process of DOM node insertion/removal. Vue will Add/Remove CSS class names at the right time to trigger CSS 3 transition/animation effects. You can also provide the corresponding JavaScript hook function to perform custom DOM operations during the transition process.

Take the v-transition = "my-transition" command as an example. When a DOM node with this command is inserted or removed, the Vue will:

Use the my-transition ID to check whether a registered JavaScript hook object exists. This object can be globally registered by Vue. transition (id, hooks), or defined within the current component through the transitions option. If this object is found, the corresponding hook is called at different stages of the transition animation.

Automatically detects whether the CSS transition effect or animation effect is applied to the target element, and adds/removes the CSS class name at the right time.

If the JavaScript hook function is not provided and the corresponding CSS transition/animation effect is not detected, DOM insertion/removal is immediately executed in the next frame.
All transition effects of Vue. js take effect only when the DOM operation is triggered by Vue. js. The trigger method can be through built-in commands, such as v-if, or through Vue instance methods, such as vm. $ appendTo ().

CSS transition effect
A typical CSS transition effect is defined as follows:

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

You also need to define three CSS classes:. expand-transition,. expand-enter and. expand-leave:

.expand-transition { transition: all .3s ease; height: 30px; padding: 10px; background-color: #eee; overflow: hidden;}.expand-enter, .expand-leave { height: 0; padding: 0 10px; opacity: 0;}

You can also provide JavaScript hooks:

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 }})

Result

The CSS class name used here is determined by the value of the v-transition Command. Take v-transition = "fade" as an example, CSS class. fade-transition will always exist, and. fade-enter and. fade-leave will be automatically added or removed at the right time. When the v-transition Command does not provide a value, the CSS class name used will be the default. v-transition,. v-enter and. v-leave.

When the show attribute changes, Vue inserts/removes the <div> element based on its current value, and adds/removes the corresponding CSS class at the right time, as shown below:

When show changes to false, Vue will:

1. Call the beforeLeave hook;
2. Apply the CSS class. v-leave to the element to trigger the transition effect;
3. Call the leave Hook;
4. Wait until the execution of the transition effect is completed. (listen to the transitionend event)
5. Remove elements from the DOM and remove the CSS class. v-leave.
6. Call the afterLeave hook.

When show is true, Vue will:

1. Call the beforeEnter hook;
2. Apply the CSS class to the element. v-enter;
3. Insert the element into the DOM;
4. Call the enter hook;
5. Apply the. v-enter Class, and then force the CSS layout to ensure that. v-enter takes effect. Finally, remove. v-enter to trigger the element transition to the original state.
6. Wait until the execution of the transition effect is completed;
7. Call the afterEnter hook.

In addition, if an element that is executing the transition effect is removed before the transition is completed, the enterCancelled hook will be executed. This Hook can be used for cleanup, such as removing the timer created at enter. The same is true for elements that are being inserted again when they are in the transition.

When all the above hook functions are executed, this points to the corresponding Vue instance. If an element is the root node of A Vue instance, this instance is applied as this; otherwise, this points to the instance to which the Transition Command belongs.

Finally, the enter and leave hook functions can accept the optional second parameter: a callback function. When your function signature contains the second parameter, it indicates that you want to use this callback to explicitly complete the entire transition process, rather than relying on Vue to automatically detect the transitionend event of CSS transition. For example:

Enter: function (el) {// No second parameter // The End Of The transition effect is determined by the CSS transition completion event}

VS

Enter: function (el, done) {// The second parameter exists. // The End Of The transition effect must be determined by manually calling 'done}

When multiple elements execute the transition effect at the same time, Vue. js performs batch processing to ensure that only one forced layout is triggered.

CSS Animation
CSS animation is called in the same way as CSS transition. The difference is that the. v-enter Class in the animation will not be removed immediately after the node is inserted into the DOM, but will be removed when the animationend event is triggered.

Example: (the compatibility prefix is omitted)

<Span v-show = "show" v-transition = "bounce"> Look at me! </Span>

.bounce-enter { animation: bounce-in .5s;}.bounce-leave { animation: bounce-out .5s;}@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); }}

Result

Pure JavaScript transition effect
You can also use JavaScript hooks without defining any CSS transition rules. When only JavaScript hooks are used, enter and leave hooks must use done Callbacks. Otherwise, they will be called synchronously and the transition will be completed immediately. In the following example, we use jQuery to register a custom JavaScript transition effect:

Vue. transition ('fade ', {enter: function (el, done) {// call the done callback when the element has been inserted into the DOM // when the animation is complete $ (el ). css ('opacity ', 0 ). animate ({opacity: 1}, 1000, done)}, enterCancelled: function (el) {$ (el ). stop ()}, leave: function (el, done) {// similarly to the enter hook $ (el ). animate ({opacity: 0}, 1000, done)}, leaveCancelled: function (el) {$ (el ). stop ()}})

After this transition is defined, you can call it by specifying the corresponding ID for v-transition:

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

If an element that only uses JavaScript transition results happens to be affected by other CSS transition/animation rules, this may interfere with the CSS Transition Detection Mechanism of Vue. In this case, you can add css: false to your hook object to disable CSS detection.

Progressive transition effect
When both v-transition and v-repeat are used, we can add a progressive transition effect to the list element. You only need to add stagger to your transition element, enter-stagger or leave-stagger features (in milliseconds ):

<Div v-repeat = "list" v-transition stagger = "100"> </div>

You can also provide stagger, enterStagger, or eaveStagger hooks for more fine-grained control:

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

Example:

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