<del id="0eqk2"></del>

<fieldset id="0eqk2"></fieldset>

點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

vue 1.0 結合animate.css定義動畫效果

來源：懂視網責編：小采時間：2020-11-27 22:11:40

vue 1.0 結合animate.css定義動畫效果

vue 1.0 結合animate.css定義動畫效果:Vue 1.0 動畫（自定義動畫）步驟： 1.給當前動畫元素添加transition'屬性其值就是動畫名稱(假如：fade) 2.給動畫名稱寫css定義 a: .fade-transition{/*定義動畫過渡*/ transition:1s all ease;} b: .fade-enter{/*定

推薦度：

點擊下載本文 文檔為doc格式

導讀vue 1.0 結合animate.css定義動畫效果:Vue 1.0 動畫（自定義動畫）步驟： 1.給當前動畫元素添加transition'屬性其值就是動畫名稱(假如：fade) 2.給動畫名稱寫css定義 a: .fade-transition{/*定義動畫過渡*/ transition:1s all ease;} b: .fade-enter{/*定

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

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

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

總結

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com