Table of contents
1. Principle of transition transition animation
Use transitions and animations together
1. Principle of transition transition animation
When an element is wrapped by a transition tag, Vue will automatically analyze the css style of the wrapped element, and then build an animation process.
At the moment when the animation starts to execute, two styles will be added to the div tag: fade-enter, fade-enter-active. When the first frame of the animation ends and the second frame starts, the fade-enter style will be removed and added at the same time fade-enter-to style. Both fade-enter-active and fade-enter-to are removed at the end of the animation execution.
tip:
The name on the transition is a name, and the added styles of vue without the name attribute are v-enter and v-enter-active
In the process of animation hiding, the principle is as follows:
The process is the same as the appeal display process
The code example is as follows
<template>
<div>
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
<button @click="change">切换</button>
</div>
</template>
<script scoped>
export default {
name: 'BaseAnimate',
data () {
return {
show: true
}
},
methods: {
change () {
this.show = !this.show
}
}
}
</script>
<style scoped>
.fade-enter,.fade-leave-to{
opacity: 0;
}
.fade-enter-active,.fade-leave-active{
transition: opacity 1s;
}
</style>Effect:
Two, use keyframes keyframe
<template>
<div>
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
<button @click="change">切换</button>
</div>
</template>
<script>
export default {
name: 'keyframes',
data () {
return {
show: true
}
},
methods: {
change () {
this.show = !this.show
}
}
}
</script>
<style scoped>
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
//会自动在页面中name为fade的标签上插入这个样式，或者直接在标签上写enter-active-class和leave-active-class，将写好的css样式名字赋上即可
.fade-enter-active{
transform-origin: left center;
animation: bounce-in 1s;
}
.fade-leave-active{
transform-origin: left center;
animation: bounce-in 1s reverse;
}
</style>//也可以使用from to 相当于0%-100%
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}Effect
3. Use animate.css in vue
First install animate.css using npm
npm install animate.css --save
Then import it in mian.js
import animate from 'animate.css' Vue.use(animate)
The code is as follows: animated is similar to a global variable, it defines the duration of the animation, the default is 1s; swing is the name of the specific animation effect of the animation, you can choose any effect. The specific effect can be viewed in the official website document animate.css animation demo_dowebok
must use enter-active-class and leave-active-class
<transition name="fade"
enter-active-class="animated swing "
leave-active-class="animated shake "
>
<div v-if="show">hello world</div>
</transition>Effect:
Use transitions and animations together
Add custom transition animation after enter-active-class
<transition name="fade"
type="transition"
:duration="{enter:5000,leave:10000}"
//enter和leave分别为入场动画和出场动画的时间
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing"
>
<!-- type="transition" 设置动画是以transition时间为标准结束还是animate时间为标准结束，animate默认时长是1s-->
<!-- appear-active-class 在页面刷新的时候展示动画效果与appear同时使用-->
<!-- :duration="5000" 自定义动画时长 在此结束后才移除class-->
<div v-if="show">hello world</div>
</transition>
<style scoped>
.fade-enter,.fade-leave-to {
opacity: 0;
}
.fade-enter-active {
transform-origin: left center;
transition: opacity 1s;
}
.fade-leave-active {
transform-origin: left center;
transition: opacity 1s;
}
</style>