vue 1.0 結(jié)合animate.css定義動畫效果
更新時間：2018年07月11日 10:29:15 作者：juneChen
本文分步驟給大家介紹了Vue 1.0自定義動畫效果，vue1.0代碼結(jié)合animate.css定義動畫，頁面一定要引入animate.cdd，具體實例代碼大家參考下本文
Vue 1.0 動畫（自定義動畫）
步驟：
1.給當(dāng)前動畫元素添加‘transition'屬性 其值就是動畫名稱(假如：fade)
2.給動畫名稱寫css定義
a: .fade-transition{/*定義動畫過渡*/ transition:1s all ease;}
b: .fade-enter{/*定義進(jìn)入動畫 注意：進(jìn)入離開最終一樣*/}
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{ /*進(jìn)入動畫*/
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 結(jié)合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"
}
}
})
總結(jié)
以上所述是小編給大家介紹的Vue 1.0自定義動畫效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
在Vue3中可以使用`ref`來獲取DOM元素,下面這篇文章主要給大家介紹了關(guān)于如何在Vue3中使用Ref訪問DOM元素的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
淺談vue中computed屬性對data屬性賦值為undefined的原因
本文主要介紹了淺談vue中computed屬性對data屬性賦值為undefined的原因，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
vue3+ts+element-plus實際開發(fā)之統(tǒng)一調(diào)用彈窗封裝的詳細(xì)過程
這篇文章主要介紹了vue3+ts+element-plus實際開發(fā)之統(tǒng)一調(diào)用彈窗封裝的詳細(xì)過程,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
這篇文章主要介紹了Vue 組件如何模塊化抽離Props的相關(guān)知識,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
Vue子組件向父組件通信與父組件調(diào)用子組件中的方法
這篇文章主要介紹了Vue子組件向父組件通信與父組件調(diào)用子組件中的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
這篇文章主要為大家詳細(xì)介紹了vue結(jié)合uniapp實現(xiàn)生成二維碼的相關(guān)知識,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以學(xué)習(xí)一下2023-12-12
這篇文章主要介紹了詳解express鑒權(quán)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
解決vue使用vant下拉框van-dropdown-item 綁定title值不變問題
這篇文章主要介紹了解決vue使用vant下拉框van-dropdown-item 綁定title值不變問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue中的數(shù)據(jù)格式化filters、formatter方式
這篇文章主要介紹了vue中的數(shù)據(jù)格式化filters、formatter方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了Vue Router路由無法跳轉(zhuǎn)問題匯總,在這里我整理了部分Vue Router路由無法跳轉(zhuǎn)問題,結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09