Vue.js' transition system allows you to automatically apply transition effects when elements are inserted or removed from the DOM. Vue.js will trigger CSS transitions or animations for you at the right time, and you can also provide the corresponding JavaScript hook function to perform custom DOM operations during the transition process.
In order 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 (fired only when inserting and deleting, using the vue-animated-list plugin)
• Dynamic Components (see Components for introduction)
•On the root node of the component, and triggered by the Vue instance DOM method (such as vm.$appendTo(el)).
When inserting or deleting an element with a transition, Vue will:
1. Try to find the JavaScript transition hook object with ID "my-transition" - register with the Vue.transition(id, hooks) or transitions option. If found, the corresponding hook will be called at different stages of the transition.
2. Automatically sniff the target element for CSS transitions or animations, and add/remove the CSS class name when appropriate.
3. If the JavaScript hook is not found and CSS transition/animation is not detected, the DOM operation (insert/delete) is executed immediately in the next frame.
CSS Transition
Example
A 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 .3s ease; height: 30px; padding: 10px; background-color: #eee; overflow: hidden;}/* .expand-enter Defines the start state of entry*//* .expand-leave Defines the end state of departure*/.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' }})Additionally, 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 }})Transitional CSS class name
The addition and switching of class names depend on the value of the transition attribute. For example, transition="fade", there will be three CSS class names:
1..fade-transition is always retained on the element.
2..fade-enter defines the beginning state of entering the transition. Apply only one frame and delete it immediately.
3..fade-leave Defines the end state of leaving the transition. Effective at the beginning of the departure transition and delete after it ends.
If the transition attribute has no value, the class names are .v-transition, .v-enter, and .v-leave by default.
Custom transition class name
1.0.14 New
We can declare a custom CSS transition class name in a transition JavaScript definition. These custom class names override the default class names. It can be very useful when you need to cooperate with third-party CSS animation libraries such as Animate.css:
<div v-show="ok" transition="bounce">Watch me bounce</div>
Vue.transition('bounce', { enterClass: 'bounceInLeft', leaveClass: 'bounceOutRight'})Explicitly declare CSS transition type
1.0.14 New
Vue.js needs to add an event listener to the transition element to listen for when the transition ends. Based on the CSS used, the event is either a transitionend or animationend. If you only use one of the two, Vue.js will be able to automatically infer the corresponding event type based on the effective CSS rules. However, in some cases, an element may need to have two types of animations at the same time. For example, you may want Vue to trigger a CSS animation, and the element has a CSS transition effect when the mouse is suspended. In this case, you need to explicitly declare the animation type (animation or transition) you want Vue to handle:
Vue.transition('bounce', { // This transition effect will only listen for `animationend` event type: 'animation'})Detailed explanation of the transition process
When the show property changes, Vue.js will insert or delete the <div> element accordingly, changing the transition CSS class name according to the following rules:
•If show becomes 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 for the transition to end (listen to the transitionend event);
5. Delete elements 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 CSS layout once to make v-enter effective. Then delete the v-enter class name to trigger the transition and return to the original state of the element;
6. Wait for the transition to end;
7. Call the afterEnter hook.
Additionally, if an element is removed while its entry transition is still in progress, the enterCancelled hook is called to clean up changes or enter created timers. The same is true for leaving the transition in turn.
When all the hook functions above are called, their this points to the Vue instance to which they belong. Compilation rules: In which context the transition is compiled, its this point to which context.
Finally, enter and leave can have a second optional callback parameter that explicitly controls how the transition ends. Therefore, there is no need to wait for the CSS transitionend event, Vue.js will wait for you to call this callback manually 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> When multiple elements transition together, Vue.js will batch process and only force layout once.
CSS animation
The usage of CSS animation is transitioning to CSS. The difference is that in the animation, the v-enter class name is not deleted immediately after the node is inserted into the DOM, but is deleted when the animationend event is triggered.
Example: (Compatibility prefix omitted)
<span v-show="show" transition="bounce">Look at me!</span>.bounce-transition { display: inline-block; /* Otherwise the scale animation will not work*/}.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); }}JavaScript Transition
You can also use only JavaScript hooks without defining any CSS rules. When using JavaScript only, the enter and leave hooks need to call the done callback, otherwise they will be called synchronously and the transition will end immediately.
It is a good idea to explicitly declare css: false for JavaScript transitions, and Vue.js will skip CSS detection. This will also prevent CSS rules from interfering with the transition inadvertently.
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 // Called after the animation $(el) .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() }})Then use the transition feature:
<p transition="fade"></p>
Asymptotic transition
transitions can be used together with v-for to create an asymptotic transition. 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) { // Each transition item adds 50ms delay // But the maximum delay limit is 300ms return Math.min(300, index * 50) }})This article has been compiled into the "Vue.js Front-end Component Learning Tutorial", and everyone is welcome to learn and read.
For tutorials on vue.js components, please click on the special topic vue.js component learning tutorial to learn.
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.