vue2-animate

概述

css的运动库 类似 animate.css

安装：

npm install vue2-animate -D

引入：
入口文件引入（注意路径）

import 'vue2-animate/dist/vue2-animate.min.css'

使用方法

• 针对单个标签 (name属性为运动形式)

<transition name="fade">
    需要运动的元素标签
</transition>

• 针对一组标签 (可以通过tag定义父元素标签，name定义运动形式)

<transition-group name="bounce" tag="渲染的父元素标签">
    循环的元素 key值不能为index
</transition-group>

注意循环的元素 key值不能为index
否则报错：
Do not use v-for index as key on <transition-group> children, this is the same as not using keys.

运动的时间，通过css去设置 例：

animation-duration:0.3s;

原理

类名是通过数据变化（新增、删除）+ transition（或transition-group）的name属性 = 最终样式
例如：
name="bounce"
数据项目新增 则 入场元素动画类名为 bounce-enter-active bounce-enter-to
数据项目删除 则 出场元素动画类名为 bounce-leave-active bounce-leave-to

运动形式参照

官网