Vue动画

1.transition动画

<button @click="show = !show">Toggle show</button>
<transition name="bounce">
<p v-if="show" style="text-align: center;">Look at me!</p>
</transition>
css样式
bounce-enter-active, .bounce-leave-active {//动画时间
transition: all .5s
}
.fade-enter, .fade-leave-to {//动画的效果
 transform: translateX(-100%);
opacity: 1;
transform: scale(2);
}

　　

　2.animation动画

<button @click="show = !show">Toggle show</button>
<transition name="bounce">
<p v-if="show" style="text-align: center;">Look at me!</p>
</transition>
css样式
bounce-enter-active, .bounce-leave-active {//动画时间
animation: fade-in .5s;
}
　　
keyframes fade-in{
0%{
transform: scale(1);
}
50%{
transform: scale(2);
}
100%{
transform: scale(3);
}