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