Vue 1.0 動畫（自定義動畫）

步驟：

1.給當前動畫元素添加‘transition'屬性  其值就是動畫名稱(假如：fade)

2.給動畫名稱寫css定義

a: .fade-transition{/*定義動畫過渡*/   transition:1s  all ease;}

b: .fade-enter{/*定義進入動畫  注意：進入離開最終一樣*/}

c：fade-leave{/*定義離開動畫*/}

html 如下：

<div id="wrap"> <input type="button" value="按鈕" @click="show"> <div class="box" v-show='isShow' transition='fade'></div></div>.box{ width:100px; height:100px; }.fade-transition{ /*定義動畫的過渡效果*/ transition:1s all ease; }.fade-enter{ /*進入動畫*/ opacity:0; }.fade-leave{/*離開的動畫*/ opacity:0; transform:translate(200px) }

js

var vm=new Vue({　　el:'#box',　　data:{　　　　isShow:true　　},　　methods:{　　　　show(){　　　　　　this.isShow=!this.isShow;　　　　}　　}});

vue 1.0 結合animate.css定義動畫

頁面記得引入animate.cdd

html

<div id="box2">  <input type="button" value="按鈕" @click='show'>  <div id="div2" class="animated" v-show='isShow' transition="bounce">  </div></div>

css

#div2{ width: 100px; height: 100px; background: red; margin: 50px auto;}

js

var vm2=new Vue({  el:'#box2',   data:{   isShow:true,   },   methods:{    show(){     this.isShow=!this.isShow;    }  },  transitions:{   bounce:{   　　enterClass:"zoomInLeft",   　　leaveClass:"zoomInRight"   }  } })

總結

以上所述是小編給大家介紹的Vue 1.0自定義動畫效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！