vue框架下使用下transition和animation

1、第一步就是要安装依赖,只安装animation动画库，transiton是直接可以使用的标签，不用去下载依赖

npm install animate.css –save

2、全局引用一下animation动画库

import animate from 'animate.css'
Vue.use(animate); 

3、简单使用一下animation动画库，只要在class加上规定的动画效果名称就可以

<div class="rotateIn"
     style="animation-duration:2s;
            animation-delay:1s;
            animation-iteration-count:1;
            animation-fill-mode:both;">
</div>
<div class="fadeInLeft"
     style="opacity:0;
            animation-duration:3s;
            animation-delay:2s;
            animation-iteration-count:1;
            animation-fill-mode:both;">
</div>
<div class="fadeInUp"
     style="opacity:0;
            animation-duration:3s;
            animation-delay:3s;
            animation-iteration-count:1;
            animation-fill-mode:both;">
</div>

4、正式使用transiton和animation,把知识进阶一下，使用transition标签

　　（1）、使用基础的transiton和animation动画

　　  

/*v是默认的，在transition中定义name属性
    <transition name=fade>
    v-enter-from就要改成fade-enter-from
*/
<transition>
   <div>hello world</div>
</transition>
 //使用transition标签时，直接在css中控制
 /*元素进入前效果*/
 .v-enter-from{
    opacity: 0;
 }
 /*元素进入时效果*/
 .v-enter-active{
 /*使用定义的动画*/
     animation: shake 0.3s;
 }
/*元素进入后效果*/
.v-enter-to{
     opacity: 1;
 }
/*元素离开前效果*/
 .v-leave-from{
     opacity: 1;
 }
/*元素离开时效果*/
 .v-leave-active{
/*使用定义的动画*/
     animation: shake 0.3s;
 }
 /*元素离开后效果*/
 .v-leave-to{
     opacity: 0;
 }
 /*定义一个动画效果*/
 @keyframes shake {
     0%{
         transform: translateX(-100px);
    }
     50%{
        transform: translateX(-50px);
    }
    0%{
         transform: translateX(50px);
    }
 }

　　（2）、使用trnasition标签的属性,结合animation的动画库

　　

<transition
    transition :duration="{enter:1500,leave:600}"
    enter-from-class="animated"
    enter-active-class="animated"
    enter-to-class="animated"
    leave-from-class="animated fadeOut"
    leave-active-class="animated fadeOut"
    leave-to-class="animated fadeOut"
    v-on:before-enter="beforeEnter"
　　v-on:enter="enter"
　　v-on:after-enter="afterEnter"
　　v-on:enter-cancelled="enterCancelled"
　　v-on:before-leave="beforeLeave"
　　v-on:leave="leave"
　　v-on:after-leave="afterLeave"
　　v-on:leave-cancelled="leaveCancelled"
    mode="out-in" appear
>
/*enter-from-class就是v-enter-from元素进入前
    animated就是使用animation动画库，fadeOut就是动画效果
 */
 /*before-enter这些就是钩子函数，是滑动进入状态
    mode="out-in"是设定动画是先入后出，还是先出后入
    appear 是设置加载时就要开始动画
 */
// 进入中
//动画进入前
// --------
beforeEnter: function (el) {
    //el就是dom元素
    // ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
//动画进入时
enter: function (el, done) {
    // ...
    done()
},
//动画进入后
afterEnter: function (el) {
    // ...
},
//动画进入完成
enterCancelled: function (el) {
    // ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
    // ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
leave: function (el, done) {
    // ...
    done()
},
afterLeave: function (el) {
    // ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
    // ...
}

　　

 

　　下面是animation常用的动画效果

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: '拉伸抖动'
}

 

网页做好动画会提高网页的档次哦