Vue provides application transition effects in many different ways when inserting, updating or removing DOM. Includes the following tools:
- Automatically apply class in CSS transition and animation
- You can use third-party CSS animation libraries, such as animate css
- Use JavaScript in the transition hook function to directly operate DOM, which can be used in conjunction with third-party JavaScript animation libraries, such as velocity js
Single component / transition element
Vue provides encapsulated components of transition. In the following cases, entry / exit transitions can be added to any element and component
- Conditional rendering (using {v-if)
- Conditional display (using v-show)
- Dynamic component
- Component root node
Here is a typical example:
<div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div> new Vue({ el: '#demo', data: { show: true } }) .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; }
When inserting or deleting elements contained in the transition component, Vue will do the following:
-
Automatically sniff whether CSS transition or animation is applied to the target element. If so, add / delete CSS class names at the right time.
-
If the transition component provides JavaScript hook function , these hook functions will be called at the right time.
-
If the JavaScript hook is not found and the CSS transition / animation is not detected, the DOM operation (insert / delete) is executed immediately in the next frame. (Note: This refers to the browser frame by frame animation mechanism, which is different from Vue's "nextTick" concept)
Transitional class name
In the transition of entry / exit, there will be 6 class switches.
-
v-enter: defines the start state of the transition. Takes effect before the element is inserted and is 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, it takes effect before the element is inserted and removed after the transition / animation is completed. This class can be used to define the process time, delay and curve function of entering the transition.
-
v-enter-to: version 2.1.8 and above definitions enter the end state of transition. The next frame takes effect after the element is inserted (at the same time # v-enter # is removed) and is removed after the transition / animation is completed.
-
v-leave: defines the start state of the exit transition. Takes effect immediately when the exit transition is triggered and the next frame is removed.
-
v-leave-active: defines the state when the exit transition takes effect. Applied throughout the exit transition phase, it takes effect immediately when the exit transition is triggered and is removed after the transition / animation is completed. This class can be used to define the process time, delay and curve function of leaving the transition.
-
v-leave-to: version 2.1.8 and above define the end state of leaving the transition. After the departure transition is triggered, the next frame takes effect (at the same time, # v-leave # is deleted) and is removed after the transition / animation is completed.
For these class names that are switched during the transition, if you use a < transition >, which has no name, then , V - is the default prefix of these class names. If you use < transition name = "my transition" >, then "v-enter" will be replaced by "my transition enter".
v-enter-active and v-leave-active can control different transition curves of entry / exit transition, which will be illustrated by an example in the following chapters.
1, Automatically apply class in CSS transition and animation
1.1 CSS transition
Commonly used transitions are transitions using CSS.
Here is a simple example:
<div id="example-1"> <button @click="show = !show"> Toggle render </button> <transition name="slide-fade"> <p v-if="show">hello</p> </transition> </div> new Vue({ el: '#example-1', data: { show: true } }) /* Different entry and exit animations can be set */ /* Set duration and animation functions */ .slide-fade-enter-active { transition: all .3s ease; } .slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active for below version 2.1.8 */ { transform: translateX(10px); opacity: 0; }
1.2. CSS animation
CSS animation is used in the same way as CSS transition. The difference is that in animation, the "v-enter" class name will not be deleted immediately after the node is inserted into DOM, but will be deleted when the "animation end" event is triggered.
Example: (compatibility prefix omitted)
<div id="example-2"> <button @click="show = !show">Toggle show</button> <transition name="bounce"> <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p> </transition> </div> new Vue({ el: '#example-2', data: { show: true } }) .bounce-enter-active { animation: bounce-in .5s; } .bounce-leave-active { animation: bounce-in .5s reverse; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }
2, You can use third-party CSS animation libraries, such as animate css
Custom transition class name
We can customize the transition class name through the following attribute s:
- enter-class
- enter-active-class
- enter-to-class (2.1.8+)
- leave-class
- leave-active-class
- leave-to-class (2.1.8+)
Their priority is higher than ordinary class names, which is important for Vue's transition system and other third-party CSS animation libraries, such as Animate.css The combination is very useful.
Example:
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> <div id="example-3"> <button @click="show = !show"> Toggle render </button> <transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" > <p v-if="show">hello</p> </transition> </div> new Vue({ el: '#example-3', data: { show: true } })
Use both transitions and animations
In order to know the completion of the transition, Vue must set up the corresponding event listener. It can be transitionend or animationend, depending on the CSS rules applied to the element. If you use any of them, Vue can automatically identify the type and set up listening.
However, in some scenes, you need to set two transition effects for the same element at the same time. For example, the "animation" is triggered and completed quickly, and the "transition" effect is not over yet. In this case, you need to use "type" attribute and set "animation" or "transition" to explicitly declare the type you need Vue to listen to.
Dominant transition duration
In many cases, Vue can automatically determine the completion time of the transition effect. By default, Vue waits for its first "transitionend" or "animationend" event on the root element of the transition effect. However, it can also be set differently - for example, we can have a carefully choreographed series of transition effects, in which some nested internal elements have delayed or longer transition effects than the root element of the transition effect.
In this case, you can customize an explicit transition duration (in milliseconds) with the duration prop on the < transition > component:
<transition :duration="1000">...</transition>
You can also customize the duration of entry and exit:
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
3, Use JavaScript in the transition hook function to directly operate DOM, which can be used in conjunction with third-party JavaScript animation libraries, such as velocity js
3.1 JavaScript hook
JavaScript hooks can be declared in attribute
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" > <!-- ... --> </transition>
// ... methods: { // -------- // Entering // -------- beforeEnter: function (el) { // ... }, // When and CSS When used in combination // Callback function done Is optional enter: function (el, done) { // ... done() }, afterEnter: function (el) { // ... }, enterCancelled: function (el) { // ... }, // -------- // When leaving // -------- beforeLeave: function (el) { // ... }, // When and CSS When used in combination // Callback function done Is optional leave: function (el, done) { // ... done() }, afterLeave: function (el) { // ... }, // leaveCancelled Only for v-show in leaveCancelled: function (el) { // ... } }
These hook functions can be used in combination with CSS transitions/animations or alone.
When only JavaScript is used for transition, you must use "done" in "enter" and "leave" for callback. Otherwise, they will be called synchronously and the transition will be completed immediately.
It is recommended to add "v-bind:css="false "for elements that only use JavaScript transition. Vue will skip CSS detection. This can also avoid the influence of CSS in the transition process.
3.2. One uses velocity JS simple example:
<!-- Velocity and jQuery.animate It works in a similar way and is also used to realize JavaScript A great choice for animation --> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> <div id="example-4"> <button @click="show = !show"> Toggle </button> <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" v-bind:css="false" > <p v-if="show"> Demo </p> </transition> </div>
new Vue({ el: '#example-4', data: { show: false }, methods: { beforeEnter: function (el) { el.style.opacity = 0 el.style.transformOrigin = 'left' }, enter: function (el, done) { // apply Velocity.js The way of animation library: usage and jQuery Medium animate Same method // First parameter: indicates the element to be animated // The second parameter: indicates the style attribute to perform the animation // The third parameter: indicates the length of time the animation is executed // The fourth parameter: the callback function that indicates the completion of animation execution Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 }) Velocity(el, { fontSize: '1em' }, { complete: done }) }, leave: function (el, done) { Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 }) Velocity(el, { rotateZ: '100deg' }, { loop: 2 }) Velocity(el, { rotateZ: '45deg', translateY: '30px', translateX: '30px', opacity: 0 }, { complete: done }) } } })
See the official website for details: https://cn.vuejs.org/v2/guide/transitions.html