vue的动画基础

2018-05-26

vue中的动画和Jq的动画出路比较大。在Jq中动画的实现多为通过操作DOM实现，而在vue这种数据驱动的框架中，操作DOM并不方便也不被推荐。vue做动画是通过css3来实现的，或者配合vue的一个库animated.css

先看一个简单的vue配合css实现的简单动画

1
2
3

<input type="button" value="动画按钮" @click="toggle" />
<!-- 动画属性transition-->
<div id="box1" :style="{width:'200px',height='200px',background:'red'}" v-show="bsign" transition='fade'></div>

#box {
        width: 400px;
        margin: 0 auto;
    }
    .fade-transition{
        transition:1s all ease;
    }
    /*进入*/
    .fade-enter{
        opacity:1;
        transform:translateX(0px);
    }
    /*出去*/
    .fade-leave{
        opacity:0;
        transform:translateX(100px);
    }
    /*css类的命名有格式，当el中的transition属性值设为X时，相应这个el的css动画的命名为X-transition为动画属性，X-enter为显示过程，X-ener为隐藏过程，另外还有enter-to,enter-active,leave-to,leaver-active*/

new Vue({
    el:"#box",
    data:{
        bsign:true
    },
    method:{
        toggle():{
            this.bsign = !this.bsign;
        }
    }
})

效果图如下：

效果图

下面简单介绍用animated.css制作动画

<div id="box">
    <input type="button" value="按钮" @click="toggle">
    <!-- 这是animated.css库来做动画的方法，其中使用的class是animation.css中的，就是动画所需要的一个class ，bounce不再是一个class而是在vue中定义的-->
    <div id="box1" class="animated" :style="{width:'100px',height:'100px',background:'red'}" v-show="bsign" transition="bounce">
    </div>
</div>

new Vue({
    el: '#box',
    data: {
        bsign: true
    },
    methods: {
        toggle() {
            this.bsign = !this.bsign;
        }
    },
    //定义所有的动画
    transitions: {
        bounce: {
            //zoomInLeft与zoomOutRight都是animated.css中的，用于实现动画效果
            enterClass: 'zoomInLeft',
            leaveClass: 'zoomOutRight'
        }
    }
})

效果图如下：

动画实现在vue2.0中的改变

class的定义

.fade-enter{}//初始状态
.fade-enter-leave{}//动画变化显示状态（初）
.fade-leave{}//
.fade-leave-active{}//动画变化结束状态（末）

fade-enter到fade-enter-active是动画的从无到有，.fade-leave到.fade-leave-active是动画从有到无，可实际理解为两个active才是进入离开的状态，两个enter只是初始。
例子:

p{
        width:100px;
        height:100px;
        background: red;
        margin:10px auto;
        opacity: 0;
    }
    /* 时间一定要给 */
    .fade-enter-active,.fade-leave-active{
        transition: 1s all ease;
    }
    /* 初始状态 和结束状态*/
    .fade-enter,.fade-leave{
        opacity: 0;
        width: 100px;
        height: 100px;
    }
    /* 激活而变化 */
    .fade-enter-active{
        opacity: 1;
        width: 300px;
        height: 300px;  
    }
    /* 激活而变化 */
    .fade-leave-active{
        opacity: 0;
        width: 100px;
        height: 100px;  
    }

<div id="box"><input type="button" value="点击显示隐藏" @click="show=!show">
    <!-- @before-enter,@enter,@after-enter分别为动画进行前进行中进行后， -->
    <transition name="fade">
        <p v-show="show"></p>
    </transition>
    </div>

new Vue({
    el:"#box",
    data:{
        show:false
    }
});

效果图如下：

配合animate做简单动画的方式

<div id="box">
    <input type="button" value="点击显示隐藏" @click="show=!show">
    <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
        <p v-show="show" class="animated"> </p>
    </transition>
    <!-- 如果有多个p要实现动画 ，使用transition-group ,并设置:key-->
    <!-- <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>

p{
    width: 100px;
    height: 100px;
    background: red;
    margin: 10px auto;
}

new Vue({
    el: "#box",
    data: {
        show: false
    }
});

效果图如下：

简单的vue做动画的方法就是这样…如果要做复杂的动画，还需要配合animated.css来做。