溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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自定義動畫效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
