Vue provides the transition component to realize the transition between components and routes. The rational use of this component can make our page more flexible and improve user experience.
concept
There will be 6 class switches during the entry/exit transition. Copy the official picture
V-enter: defines the start state of the transition. It takes effect before the element is inserted and is removed the next frame after the element is inserted.
V-enter -active: defines the status when the transition takes effect. Applied throughout the transition phase, before the element is inserted and removed after the transition/animation is complete. This class can be used to define the process time, delay, and curve functions that enter the transition.
V-enter -to: indicates the end state of the transition defined in version 2.1.8 or later. The next frame takes effect after the element is inserted (the V-enter is removed at the same time) and removed after the transition/animation is complete.
V-leave: Defines the start state of the exit transition. Immediately after the exit transition is triggered, the next frame is removed.
V-leave-active: defines the status when the leave transition takes effect. Applies throughout the exit transition phase, takes effect immediately when the exit transition is triggered, and removes after the transition/animation is complete. This class can be used to define exit transition process time, delay and curve functions.
V-leave-to: the end state of the departure transition defined in version 2.1.8 and above. The next frame takes effect after the exit transition is triggered (and the V-leave is deleted at the same time), and is removed after the transition/animation is complete.
It still looks a little messy, so let’s get this straight.
Enter defines the start state, active defines the process, and Enter defines the end, but there is crossover in the actual process. As you can see from the breakpoints,
- Add v – enter
- Add v – enter – active,
- Uninstall v – enter
- Add v – ernter – to
- Unmount v-enter-to and V-Enter -active
// transition: all 2s;
.move-enter {
margin-left: 0;
}
.move-enter-active {
margin-left: 100px;
}
.move-enter-to {
margin-left: 200px;
}
Copy the codeFor example, in the case above, how would the transition animation work?
Two things to note here.
- Enter -active overwrites the starting position of the enter
- There are two transitions, and enter-to starts after active, so it’s back to the DOM element itself in the fourth second.
Therefore, the official documentation also uses v-Enter to define the starting position and control the effect in Enter-active.
Use class for transition effects
On top of these six classes, you can use either Transition or animation to achieve the desired effect. For example, here we just define a transition effect for all route changes,
The Appear attribute means that it also applies to animation when the page first loads
<transition appear name="move">
<router-view></router-view>
</transition>
Copy the code@keyframes animationIn { 0% { transform: translate(-100%, 0); } 100% { transform: translate(0, 0); } } @keyframes animationOut { 0% { transform: translate(0, 0); } 100% { transform: translate(100%, 0); } } .move-enter { transform: translate(-100%, 0); position: absolute! important; z-index: 999; top: 0; left: 0; width: 100%; }. Move-enter-active {animation: animationIn 0.2s; position: absolute! important; / / into the components of the cover removal of components, reference / / https://cn.vuejs.org/v2/guide/transitions.html#%E8%BF%87%E6%B8%A1%E6%A8%A1%E5%BC%8Fz-index: 999; top: 0; left: 0; width: 100%; } .move-leave { transform: translate(0, 0); }. Move-leave-active {animation: animationOut 0.2s; }Copy the codeThe effect
JavaScript hooks
These hook functions can be used in conjunction with CSS Transitions /animations
<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>Copy the codeIn these hooks, other third-party libraries can be used, and the EL in the callback will be the actual DOM element, for example, using the officially recommended velocity.js animation library
<div class="main">
<transition name="showRect" appear
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
@before-leave="handleBeforeLeave"
@leave="handleLeave"
@after-leave="handleAfterLeave"
:css="false">
<div class="box" v-if="show"></div>
</transition>
</div>
<button @click="start"Switch > < / button >Copy the code methods: {
start() { this.show = ! this.show }, handleBeforeEnter:function (el) {
el.style.opacity = 0;
console.log('Block display animation about to execute');
},
handleEnter: function (el, done) {
Velocity(el, 'stop');
Velocity(el, {
backgroundColor: '#0085eb',
opacity: 1,
translateX: 260,
rotateZ: ['360deg', 0]}, {duration: 1000, easing: [0.4, 0.01, 0.165, 0.99], complete:done
});
console.log('Block shows animation in execution... ');
},
handleAfterEnter: function (el) {
console.log('Block shows end of animation');
},
handleBeforeLeave: function (el) {
console.log('Block Hide animation about to execute');
},
handleLeave: function (el, done) {
Velocity(el, 'stop');
Velocity(el, {
backgroundColor: '#4dd0e1',
opacity: 0,
translateX: 0,
rotateZ: [0, '360deg'] {duration: 1000, easing: [0.4, 0.01, 0.165, 0.99], complete:done
});
console.log('Block hidden during animation execution... ');
},
handleAfterLeave: function (el) {
console.log('Block hide animation ends'); }}Copy the code
List the transition
Vue also provides a transition-group component as a container for list transitions
Instead, it will be rendered as a real element: the default is one. You can also use the tag feature to replace other elements
Transition-group has a special V-move attribute, which will be applied during the process of element positioning. The effect can be found on the official website.
Others will not copy the official website
In list transitions, you can combine JS hooks to achieve special effects
Take a chestnut
<template>
<div>
<div class="btn" @click="addItem"> add </div> <div class="btn" @click="sort"<div > <div class="box">
<div class="item-bar">
<transition-group name="fade" tag="p" appear
v-on:before-enter="beforeEnter"
v-on:after-enter="afterEnter"> // Data-index is an identifier to get the current element's sequence number <div class= in the JS hook"item" v-for="(i, index) in list" :key="i" :data-index="index">{{i}}</div>
</transition-group>
</div>
</div>
</div>
</template>
Copy the code<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name: "home".data() {
return {
show: true, list: [5,4,3,2,1], nextNum: 6}; }, methods: {showDom() { this.show = ! this.show }, beforeEnter:function(el: any) {el.style.opacity = 0 // Before each element is inserted, opacity is 0letIndex = el.dataset. Index May insert multiple elements ata time, // display 5 elements first when the page is loadedifEl.style. animationDelay = el.dataset. Index * 0.3 +'s'
}
},
afterEnter: function (el) {
el.style.opacity = 1
console.log('afterEnter')},addItem() {
this.list.push(this.nextNum++)
},
sort() {
this.list = this.list.sort((a, b) => a -b)
}
}
});
</script>
Copy the code@keyframes animat { 0% { margin-left: 300px; opacity: 0; } 100% { margin-left: 0; opacity: 1; } } .fade-enter { opacity: 0; margin-left: 300px; } .fade-enter-active { opacity: 0; animation: animat 1s; } .fade-enter-to { opacity: 1; margin-left: 0; }. Fade-move {transition: all 0.3s; } .fade-leave { left: 10px; } .fade-leave-active { transition: all 2s ease-out; } .fade-leave-to { left: -100%; }Copy the codeThe effect
The above –