Vue2使用animate.css

安装

npm安装包依赖

npm install --save vue2-animate

在main.js中引用

import 'animate.css'

正式使用

1、在过度元素上使用对应的name属性

<transition-group name="fadeLeft" tag="ul">
    <li v-for="item in items" v-bind:key="item">
        {
  { item }}
    </li>
</transition-group>
//此刻v-enter变为fadeLeft-enter才能给tiansition-group标签添加过渡或者动画效果。

2、使用animate.css里面定义好的动画类

// 过渡&动画组件
    <transition enter-active-class="animate__animated animate__rotateIn" leave-active-class="animate__animated animate__rotateOut">
        // 盒子
        <div class="box" v-show="isShow"></div>
    </transition>

3、css样式