vue动画(transition)的使用及实现动画的方法有哪些

一,实现动画条件:

1, 如果要实现一个元素动画展示,那么当前元素/组件必须是通过v-if v-show 动态组件。

2,动画元素外层必须有内置组件transition包裹起来

3,transition 有个name属性 name属性的值为动画类名

  动态类名分以下几种

  name-enter  name-enter-active  name-enter-to

   name-leave name-leave-active  name-leave-to

二,实现动画方法

      方法1:






如果有多个元素动画的时候  我们可以使用transition-group 并加唯一key值






 方法2:不用enter和leave实现动画 (可以实现动画不消失要求)






 方法3:使用swiper中的animate.css库

1,通过link或import引入该css

vue动画(transition)的使用及实现动画的方法有哪些_第1张图片

 2,代码实现如下






在使用这个animate.css时候,另外一种实现动画方法:提前命名类名






vue动画(transition)的使用及实现动画的方法有哪些_第2张图片

 方法4,其他实现动画的插件:wow.js插件

你可能感兴趣的:(vue,原生js,vue.js,前端,javascript)