transition name="fade">
<p v-show="show"></p>
//运动东西(元素,属性,路由)
</transition>
class定义:
.fade-enter{} //初始状态
.fade-enter-active {} //变化成什么样->当元素显示出来
.fade-leave{}
.fade-leave-active{} //变成什么样->当元素离开
<transition></transition>组件里面的事件:
@before-enter 动画进入之前
@enter 动画进入
@after-enter 动画进入之后
@before-leave 动画离开之前
@leave 动画离开
@after-leave 动画离开之后
如何配合animate.css使用
1 引入animate.css
2 需注意:animated 配合
[html] view plain copy
enter-active-class="bounceInLeft" leave-active-class="bounceOutRig”使用 eg:
[html] view plain copy
<transition enter-active-class="bounceInLeft" leave-active-class="bounceOutRight">
<p v-show="show" class="animated"></p>
</transition>
<transition></transition>只能让一组元素去运动,如果用多组元素用<transiton-group></transition-group>。