vue 1.0 結(jié)合animate.css定義動(dòng)畫效果
Vue 1.0 動(dòng)畫（自定義動(dòng)畫）
步驟：
1.給當(dāng)前動(dòng)畫元素添加‘transition'屬性 其值就是動(dòng)畫名稱(假如：fade)
2.給動(dòng)畫名稱寫css定義
a: .fade-transition{/*定義動(dòng)畫過渡*/ transition:1s all ease;}
b: .fade-enter{/*定義進(jìn)入動(dòng)畫 注意：進(jìn)入離開最終一樣*/}
c：fade-leave{/*定義離開動(dòng)畫*/}
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)畫的過渡效果*/
transition:1s all ease;
}
.fade-enter{ /*進(jìn)入動(dòng)畫*/
opacity:0;
}
.fade-leave{/*離開的動(dòng)畫*/
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)畫
頁面記得引入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)畫效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
前端本地存儲(chǔ)方案localForage在vue3中使用方法
localForage是前端本地存儲(chǔ)的庫,支持多種存儲(chǔ)后端,并提供了一致的API來存儲(chǔ)和檢索數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于前端本地存儲(chǔ)方案localForage在vue3中使用的相關(guān)資料,需要的朋友可以參考下2024-09-09
vue父組件調(diào)用子組件方法報(bào)錯(cuò)問題及解決
這篇文章主要介紹了vue父組件調(diào)用子組件方法報(bào)錯(cuò)問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue結(jié)合AntV?G2的使用踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解Vue2+Echarts實(shí)現(xiàn)多種圖表數(shù)據(jù)可視化Dashboard（附源碼）
本篇文章主要介紹了詳解Vue2+Echarts實(shí)現(xiàn)多種圖表數(shù)據(jù)可視化Dashboard（附源碼），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
Vue封裝localStorage設(shè)置過期時(shí)間的示例詳解
這篇文章主要介紹了Vue封裝localStorage設(shè)置過期時(shí)間的相關(guān)資料,在這個(gè)示例中,我們?cè)贛yComponent.vue組件的setup函數(shù)中導(dǎo)入了setItemWithExpiry和getItemWithExpiry函數(shù),并在函數(shù)內(nèi)部使用它們來設(shè)置和獲取帶有過期時(shí)間的localStorage數(shù)據(jù),需要的朋友可以參考下2024-06-06
Vue?使用postMessage?實(shí)現(xiàn)父子跨域通信
這篇文章主要介紹了Vue應(yīng)用?postMessage?實(shí)現(xiàn)父子跨域通信,通過示例介紹了postMessage的使用，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
Vue.js組件使用props傳遞數(shù)據(jù)的方法
這篇文章主要為大家詳細(xì)介紹了Vue.js組件使用props傳遞數(shù)據(jù)的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
vue使用drag與drop實(shí)現(xiàn)拖拽的示例代碼
本篇文章主要介紹了vue使用drag與drop實(shí)現(xiàn)拖拽的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
vue項(xiàng)目配置sass及引入外部scss文件方式
這篇文章主要介紹了vue項(xiàng)目配置sass及引入外部scss文件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue項(xiàng)目獲取url中的參數(shù)(親測可用)
這篇文章主要介紹了Vue項(xiàng)目獲取url中的參數(shù)，本文通過兩種情況分析給大家詳細(xì)介紹，感興趣的朋友一起看看吧2022-08-08