大家好，又见面了，我是你们的朋友全栈君。
vue2使用animate css
安装 安装的方式有很多种 1.在html文件中直接引用从github上下载的资源
代码语言：javascript复制 <link rel="stylesheet" href="vue2-animate.min.css">2.如果使用webpack并且用对了css-loader可以使用npm 安装 npm安装包依赖
npm install –save vue2-animate
3.在main.js中引用
代码语言：javascript复制require('vue2-animate/dist/vue2-animate.min.css')或者
代码语言：javascript复制import 'vue2-animate/dist/vue2-animate.min.css';使用less
代码语言：javascript复制@import "<PATH_TO_SOURCE>/src/vue2-animate.less";4.使用构建器编译
git clone https://github.com/asika32764/vue2-animate.git cd vue2-animate npm install npm run build #Compiled .css files go to the dist folder
正式使用 1.基本的使用就是在过度元素上使用对应的name属性
代码语言：javascript复制<transition-group name="fadeLeft" tag="ul">
<li v-for="item in items" v-bind:key="item">
{
{ item }}
</li>
</transition-group>2.使用不同的载入载出动画 第一种：使用custom-classes-transition,需要在不同的载入载出动画上加-enter和-leave后缀
代码语言：javascript复制 <transition
name="custom-classes-transition"
enter-active-class="bounceLeft-enter"
leave-active-class="bounceRight-leave"
>
<p v-if="show">hello</p>
</transition>第二种：使用in/out类名在动画名后面加上In或者Out
代码语言：javascript复制<transition
name="bounce"
enter-active-class="bounceInLeft"
leave-active-class="bounceOutRight"
>
<p v-if="show">hello</p>
</transition>现在支持的部分动画
fade: { title: ‘淡入淡出’, fadeIn: ‘淡入’, fadeInDown: ‘向下淡入’, fadeInDownBig: ‘向下快速淡入’, fadeInLeft: ‘向右淡入’, fadeInLeftBig: ‘向右快速淡入’, fadeInRight: ‘向左淡入’, fadeInRightBig: ‘向左快速淡入’, fadeInUp: ‘向上淡入’, fadeInUpBig: ‘向上快速淡入’, fadeOut: ‘淡出’, fadeOutDown: ‘向下淡出’, fadeOutDownBig: ‘向下快速淡出’, fadeOutLeft: ‘向左淡出’, fadeOutLeftBig: ‘向左快速淡出’, adeOutRight: ‘向右淡出’, fadeOutRightBig: ‘向右快速淡出’, fadeOutUp: ‘向上淡出’, fadeOutUpBig: ‘向上快速淡出’ }, bounce: { title: ‘弹跳类’, bounceIn: ‘弹跳进入’, bounceInDown: ‘向下弹跳进入’, bounceInLeft: ‘向右弹跳进入’, bounceInRight: ‘向左弹跳进入’, bounceInUp: ‘向上弹跳进入’, bounceOut: ‘弹跳退出’, bounceOutDown: ‘向下弹跳退出’, bounceOutLeft: ‘向左弹跳退出’, bounceOutRight: ‘向右弹跳退出’, bounceOutUp: ‘向上弹跳退出’ }, zoom: { title: ‘缩放类’, zoomIn: ‘放大进入’, zoomInDown: ‘向下放大进入’, zoomInLeft: ‘向右放大进入’, zoomInRight: ‘向左放大进入’, zoomInUp: ‘向上放大进入’, zoomOut: ‘缩小退出’, zoomOutDown: ‘向下缩小退出’, zoomOutLeft: ‘向左缩小退出’, zoomOutRight: ‘向右缩小退出’, zoomOutUp: ‘向上缩小退出’ }, rotate: { title: ‘旋转类’, rotateIn: ‘顺时针旋转进入’, rotateInDownLeft: ‘从左往下旋入’, rotateInDownRight: ‘从右往下旋入’, rotateInUpLeft: ‘从左往上旋入’, rotateInUpRight: ‘从右往上旋入’, rotateOut: ‘顺时针旋转退出’, rotateOutDownLeft: ‘向左下旋出’, rotateOutDownRight: ‘向右下旋出’, rotateOutUpLeft: ‘向左上旋出’, rotateOutUpRight: ‘向右上旋出’ }, flip: { title: ‘翻转类’, flipInX: ‘水平翻转进入’, flipInY: ‘垂直翻转进入’, flipOutX: ‘水平翻转退出’, flipOutY: ‘垂直翻转退出’ }, strong: { title: ‘强调类’, bounce: ‘弹跳’, flash: ‘闪烁’, pulse: ‘脉冲’, rubberBand: ‘橡皮筋’, shake: ‘左右弱晃动’, swing: ‘上下摆动’, tada: ‘缩放摆动’, wobble: ‘左右强晃动’, jello: ‘拉伸抖动’ }
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/157844.html原文链接：https://javaforall.cn
