VUE之动画特效

1. 在vue使用animate.css库

安装:npm install animate.css --save

引用:import animate from 'animate.css'

vue中使用动画必须要使用到 <transition>标签,将需要动画特效的标签用transition包裹着

栗子:

图a

在图a中,animated必须要,然后再加上你想要的动画类名;

appear ,appear-active-class属性是让动画在页面初始化或刷新的时候就出现


2.不引用aniamte库时,过渡动画该怎么写?

在进入/离开的过渡中,会有 6 个 class 切换。传送门:官网查看

其中 v 是可以根据transition标签的 name 属性值而变,例如<transition name="fade">,样式名对应则是 fade-enter,fade-enter-active......

enter-class,enter-active-class,enter-to-class (2.1.8+),leave-class,leave-active-class,leave-to-class (2.1.8+)

摘自官网

3.及引用animate库又使用自定义动画

当应用了animate库时,又想自定义动画时,这时候可以如下图b所示enter-active-class,leave-active-class属性里添加自己的class类名,

然后去css定义自己的动画,时间上如果有冲突,则可用图b所示的解决方法 

:duration="{enter:时间,leave:时间}"或者 :duration="时间"


图b


图c

4.多个元素过度

摘自官网

相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们,在v-if/v-else 后面添加一个 key="your-keyname"

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 进入/离开 & 列表过渡 概述 Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下...
    Sunshinga阅读 703评论 0 0
  • 混合 组件系统是Vue的核心,如何合理的规划组件,是我们在开发中需要深入思考的问题,我个人习惯把一些组件使用逻辑和...
    li4065阅读 858评论 0 1
  • 混合 组件系统是Vue的核心,如何合理的规划组件,是我们在开发中需要深入思考的问题,我个人习惯把一些组件使用逻辑和...
    去年的牛肉阅读 635评论 0 1
  • 《断章》 —— 卞之琳 你站在桥上看风景,看风景人在楼上看你。 明月装饰了你的窗子,你装饰了别人的梦。 那...
    今晚胡乱吃几杯阅读 250评论 0 1
  • 读诗:积雨空林烟火迟,蒸藜炊黍饷东菑。漠漠水田飞白鹭,阴阴夏木啭黄鹂。山中习静观朝槿,松下清斋折露葵。野老与人争席...
    余瑗阅读 215评论 0 2