官方链接 https://github.com/daneden/animate.css
英文的,所以自己总结下:
官方说明:
$('#yourElement').addClass('animated bounceOutLeft');
但是在vue中步骤如下
安装 npm install animate.css --save安装,在引入
首先查到的是这种方式,引入
// import animated from 'animate.css'
// Vue.use(animated)
最后改用这种比较好,在需要的地方引入下
// 直接在需要的位置进行引入 import @'../../node_modules/animate.css/animate.css'
使用的时候也简单,只需要管开始效果 enter-active-class 和 结束效果 leave-active-class
网上样例如下,已经测试验证过
<div id="box">
<!-- 控制数据的值切换显示隐藏 -->
<button @click="show=!show">点我展示效果</button>
<transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<p v-show="show" class="animated"></p>
</transition>
<!-- 第二种方法 -->
<!-- <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<p v-show="show"></p>
</transition> -->
<!-- 多元素运动 -->
<!-- <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<p v-show="show" class="animated" :key="1"></p>
<p v-show="show" class="animated" :key="2"></p>
</transition-group> -->
</div>
标绿为已经验证的,直接替换需要就可以了,对于后端来说这些暂时应该够用了
<div class="div001">
<button @click="show2=!show2">点我展示效果</button>
<transition enter-active-class="rotateIn" leave-active-class="rotateOut">
<p v-show="show2" class="animated">
<img src="@/assets/image/img_01.jpg" style="height:200px;width:auto;" alt="">
</p>
</transition>
</div>
bounce 弹跳,反弹,弹起
flash 闪现,一瞬间,反射
pulse 跳动,脉冲,脉跳
rubberBand 橡皮圈,橡皮带
shake 摇动,震动
swing 旋转,悬挂,摇摆
tada 时间,波幅范围
wobble 摆动, 摇晃,不稳定
jello 凝聚
bounceIn 放大弹跳,
bounceInDown 从上面跳跳来
bounceInLeft 从左边出现
bounceInRight 从右边出现
bounceInUp 从下面上来
bounceOut 从上面下去
bounceOutDown 从原来的位置跳下去
bounceOutLeft 从原来的位置跳到左边去
bounceOutRight 从原来的位置跳到右边去
bounceOutUp 从原来的位置跳到上面去
fadeIn 整体渐入,淡淡的隐现
fadeInDown 从上向下渐入
fadeInDownBig 从上向下直接滑动下来
fadeInLeft 从左向右渐入
fadeInLeftBig 从左向右直接滑动
fadeInRight 从右向左渐入
fadeInRightBig 从右向左直接滑动
fadeInUp 从下向上渐入
fadeInUpBig 从下向上直接滑动
fadeOut 渐出
fadeOutDown 从上向下渐出
fadeOutDownBig 从上向下直接滑动出去
fadeOutLeft 从左向右渐出
fadeOutLeftBig 从左向右直接滑动出去
fadeOutRight 从右向左渐出
fadeOutRightBig 从右向左直接滑动出去
fadeOutUp 从下向上渐出
fadeOutUpBig 从下向上直接滑动出去
flipInX 水平翻转呈现
flipInY 垂直翻转呈现
flipOutX 水平翻转消失
flipOutY 垂直翻转消失
lightSpeedIn 轻轻的呈现 倾斜
lightSpeedOut 轻轻的消失 倾斜
rotateIn 旋转呈现
rotateInDownLeft 从左向右转动渐入 从上向下转动 转动:没有旋转到一周
rotateInDownRight 从右向左转动渐入 从上向下转动 转动:没有旋转到一周
rotateInUpLeft 从右向左转动渐入 从下向上转动
rotateInUpRight 从左向右转动渐入 从下向上转动 转动:没有旋转到一周
rotateOut 旋转消失
rotateOutDownLeft 从左向右转动渐出 从上向下转动 转动:没有旋转到一周
rotateOutDownRight 从右向左转动渐出 从上向下转动 转动:没有旋转到一周
rotateOutUpLeft 从右向左转动渐出 从下向上转动 转动:没有旋转到一周
rotateOutUpRight 从左向右转动渐出 从下向上转动 转动:没有旋转到一周
hinge 定点转动
rollIn 翻滚旋转渐入 旋转:转动一周
rollOut 旋转渐出 旋转:转动一周
zoomIn 放大渐入
zoomInDown 从上向下出现同时放大
zoomInLeft 从右向左出现同时放大
zoomInRight 从左向右出现同时放大
zoomInUp 从下想上出现同时放大
zoomOut 缩小渐出
zoomOutDown 从上向下消失同时缩小
zoomOutLeft 从右向左消失同时缩小
zoomOutRight 从左向右消失同时缩小
zoomOutUp 从下向上消失同时缩小
slideInDown 从上向下滑动
slideInLeft 从右向左滑动
slideInRight 从左向右滑动
slideInUp 从下向上滑动
slideOutDown 从原来的位置向下滑动
slideOutLeft 从原来的位置从左滑动
slideOutRight 从原来的位置向右滑动
slideOutUp 从原来的位置向上滑动
来源:oschina
链接:https://my.oschina.net/u/2325739/blog/2995029