vue-directive-animate

基于animate.css的Vue自定义指令

引入animate.css

1.通过 @vue/cli 创建项目（node环境）

• 使用最新版animate.css

1. $ npm install animate.css --save
2. main.js中 import 'animate.css'

• 使用自带的animate.css

1. main.js中 import 'vue-directive-animate/lib/animate.min.css'

2.直接用 <link> 引入

1. 下载animate.css(https://github.com/daneden/animate.css)
2. <link rel="stylesheet" href="animate.min.css">

引入指令

1.通过 @vue/cli 创建项目（node环境）

1. $ npm install vue-directive-animate --save

2. 在main.js中编写
   import vueAnimate from 'vue-directive-animate'
   Vue.use(vueAnimate);

2.直接用 <script> 引入

<script type="text/javascript" src="vue-animate.js "></script>

使用方法

animate-delay动画延迟，animate-duration动画持续时间

<div 
    v-animate="bounce"
    :animate-delay="1"
    :animate-duration="1">
    动画效果
</div>

Warning

1. animate.css更新至4.x版本之后，使用方法有所改变，请升级至4.x的版本，或直接引入自带的animate.css
2. 一定要引入animate.css并且使用Vue，才有效