Through Vue.js' transition system, you can easily add transition animation effects to the process of inserting/removing DOM nodes. Vue will add/remove CSS class names at the appropriate time to trigger CSS3 transition/animation effects. You can also provide the corresponding JavaScript hook function to perform custom DOM operations during the transition process.
Taking the v-transition="my-transition" instruction as an example, when the DOM node with this instruction is inserted or removed, Vue will:
Use the my-transition ID to find out if there is a registered JavaScript hook object. This object can be globally registered by Vue.transition(id, hooks) or defined inside the current component through the transitions option. If this object is found, the corresponding hook will be called at different stages of the transition animation.
Automatically detect whether the target element has CSS transition effects or animation effects applied, and add/remove the CSS class name at the appropriate time.
If no JavaScript hook function is provided and no corresponding CSS transition/animation effect is detected, the insertion/removal of the DOM is performed immediately in the next frame.
All Vue.js transition effects will only take effect if the DOM operation is triggered through Vue.js. The triggering can be done by built-in instructions, 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;}At the same time, 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 directive. Taking v-transition="fade" as an example, the 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 directive does not provide a value, the CSS class names used will be the default .v-transition, .v-enter, and .v-leave.
When the show attribute changes, Vue will insert/remove the <div> element based on its current value, and add/remove the corresponding CSS class at the appropriate time, as follows:
When show becomes false, Vue will:
1. Call the beforeLeave hook;
2. Apply the CSS class .v-leave on the element to trigger the transition effect;
3. Call the leave hook;
4. Wait for the transition effect to be executed; (listen to the transitionend event)
5. Remove elements from the DOM and remove 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.v-enter on the element;
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 to transition to its original state.
6. Wait for the transition effect to be executed;
7. Call the afterEnter hook.
Additionally, if an element that is executing an incoming transition effect is removed before the transition has been completed, the enterCancelled hook will be executed. This hook can be used for cleaning work, such as removing timers created at enter. The same applies to elements that are being reinserted during the transition.
When all the above hook functions are executed, this points to the corresponding Vue instance. If an element itself is the root node of a Vue instance, the instance will be applied as this; otherwise this points to the instance to which the transition instruction belongs.
Finally, the enter and leave hook functions can accept an optional second parameter: a callback function. When your function signature contains a second parameter, it means you expect to use this callback to explicitly complete the entire transition process, rather than relying on Vue to automatically detect transitionend events of CSS transitions. for example:
enter: function (el) { // No second parameter // The end of the transition effect is determined by the CSS transition end event}VS
enter: function (el, done) { // There is a second parameter // The end of the transition effect must be determined by manually calling `done`}When multiple elements perform transition effects at the same time, Vue.js will batch process to ensure that the forced layout is triggered only once.
CSS animation
CSS animations are called in the same way as CSS transition effect. The difference is that in the animation, the .v-enter class is not removed immediately after the node is inserted into the DOM, but is removed when the animationend event is triggered.
Example: (Compatibility prefix 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 effects
You can also just use JavaScript hooks without defining any CSS transition rules. When using only JavaScript hooks, the enter and leave hooks must use the done callback, otherwise they will be called synchronously and the transition will end immediately. In the following example, we use jQuery to register a custom JavaScript transition effect:
Vue.transition('fade', { enter: function (el, done) { // The element has been inserted into the DOM at this time // Call done when the animation is completed $(el) .css('opacity', 0) .animate({ opacity: 1 }, 1000, done) }, enterCancelled: function (el) { $(el).stop() }, leave: function (el, done) { // Similar to the enter hook $(el).animate({ opacity: 0 }, 1000, done) }, leaveCancelled: function (el) { $(el).stop() }})After defining this transition, you can call it by specifying the corresponding ID to v-transition:
<p v-transition="fade"></p>
If an element that only uses JavaScript transition effects happens to be affected by other CSS transition/animation rules, this may interfere with Vue's CSS transition detection mechanism. When encountering this situation, you can prohibit CSS detection by adding css: false to your hook object.
Gradually transition effect
When using both v-transition and v-repeat, we can add a progressive transition effect to the list element. You just need to add stagger, enter-stagger or leave-stagger features (in milliseconds):
<div v-repeat="list" v-transition stagger="100"></div>
Or you can also provide stagger, enterStagger or eaveStagger hooks for finer granular control:
Vue.transition('stagger', { stagger: function (index) { // Add 50ms delay to each transition element, // But the maximum delay is 300ms return Math.min(300, index * 50) }})Example:
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.