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
        }
    }
});