vue之动画及过渡效果

1、自定义css样式实现

css(注：若未定义transition的name，默认未v-)

<style>
   .v-enter,
   .v-leave-to{
      <#--过渡效果 透明度-->
      opacity:0;
   }
   .v-enter-active,
   .v-leave-active{
      transition:opacity 3s;
   }
</style>

2、css实现

引入css动画库

<!--animate css动画库-->
<link href="/animate/css/animate.css" rel="stylesheet">

页面

<#--css动画-->
<div id="transition">
    <transition name="fade"
                <#--type="transition"-->  <#--定义动画时长以transition的为准-->
                :duration="{entity:5000,leave:10000}"  <#--自定义动画时长-->
                appear  <#--初始动画效果-->
                enter-active-class="animated bounce fade-enter-active"   <#--入场动画-->
                leave-active-class="animated bounceOut fade-leave-active" <#--出场动画-->
                appear-active-class="animated swing">  <#--初始动画效果-->
        <div v-show="show">Hello Lucy</div>
    </transition>
    <button @click="change">查看动画过度效果</button>
</div>

js

//css动画
var transition=new Vue({
    el:'#transition',
    data:{
        show:true
    },
    methods:{
        change:function () {
           this.show=!this.show
        }
    }
});

3、js实现

引入js动画库

<!--velocity js动画库-->
<script type="text/javascript" src="/velocity/js/velocity.min.js"></script>

页面

<#--js动画-->
<div id="velocity">
    <!--结束类似,@before-leave @leave @after-leave-->
    <transition
    name="fade"
    mode="out-in"
    @before-enter="handerBeforeEnter"
    @enter="handerEnter"
    @after-enter="handerAfterEnter" >
        <component :is="show"></component>
        <onekey="hello">Hello Lucy</one>
        <twokey="bye">Bye Lucy</two>
    </transition>
    <button @click="change">查看动画过度效果</button>
</div>

js：

//js动画
Vue.component("one",{
   template:'<li>one</li>'
});

Vue.component("two",{
    template:'<li>two</li>'
});

var velocity=new Vue({
    el:'#velocity',
    data:{
        show:'one'
    },
    methods:{
        change:function () {
            this.show= this.show==='one'?'two':'one'
        },
        handerBeforeEnter:function (el) {//动画进入前
            el.style.opacity=0 //透明度
        },
        handerEnter:function (el,done) {//进入动画时
            Velocity(el,{opacity:1},{duration:1000,complete:done}) //duration:1000动画效果1s;complete:done 回调，表示结束（velocity文档有）
        },
        handerAfterEnter:function () {//进入动画后
            console.log("动画结束")
        }
    }
});

4、列表动画实现

页面（注：列表使用transition-group）

<div id="transitionGroup">
    <transition-group name="fade">
    <div v-for="item in list" :key="item.id">{{item.title}}</div>
    </transition-group>
    <button @click="handelClick">添加列表元素</button>
</div>

js：

//列表动画
var count=0;
var transitionGroup=new Vue({
    el:'#transitionGroup',
    data:{
        list:[]
    },
    methods:{
        handelClick:function () {
            this.list.push({
                id:count++,
                title:"hello world"

            })
        }

    }
});

5、使用组件封装动画及过渡效果

页面

<#--封装动画组件-->
<div id="componentTransition">
    <child :show="show">
        <div>Hello Lucy</div>
    </child>
    <button @click="change">切换</button>
</div>

js

// 封装动画组件
Vue.component('child',{
    props:['show'],
    template:'<transition ' +
      '@before-enter="handerBeforeEnter"' +
      '@enter="handerEnter"' +
      '@after-enter="handerAfterEnter">' +
      '<slot v-if="show"></slot>' +
      '</transition>',
    methods:{
        handerBeforeEnter:function (el) {//动画进入前
             el.style.opacity=0 //透明度
         },
         handerEnter:function (el,done) {//进入动画时
             Velocity(el,{opacity:1},{duration:1000,complete:done}) //duration:1000动画效果1s;complete:done 回调，表示结束（velocity文档有）
         },
         handerAfterEnter:function () {//进入动画后
             console.log("动画结束")
         }
    }
});

var componentTransition=new Vue({
    el:'#componentTransition',
    data:{
        show:true
    },
    methods:{
        change:function () {
           this.show=!this.show
        }
    }
});