Vuejs动画

使用transition 元素 把 需要被动画控制的元素包裹起来transition元素是vue官方提供的
分为
分为两组 ENTER 和 LEAVE
其中 分别分为
两个时间点 和 一个时间段
v-enter;v-enter-to ; v-enter-active
v-leave ;v-leave-to ; v-leave-active

Vuejs动画_第1张图片
image.png




    
    Title






这是一个H3

实现一组动画
当我们想要 一个H3 和 一个H6的时候




    
    Title






这是一个H3


这是一个H6

现在这两组动画是相同的
现在可以通过修改V-前缀来进行两组动画的分别控制




    
    Title






这是一个H3


这是一个H6

通过给transition元素添加一个name属性 此时控制他的CSS就变成了"【name】-"前缀 这样就可以实现不同动画

你可能感兴趣的:(Vuejs动画)