1.0.1 • Published 4 years ago
vue-directive-animate v1.0.1
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
- animate.css更新至4.x版本之后,使用方法有所改变,请升级至4.x的版本,或直接引入自带的animate.css
- 一定要引入animate.css并且使用Vue,才有效