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{/*定義進入動畫 注意：進入離開最終一樣*/}
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 結(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)文章
localForage是前端本地存儲的庫,支持多種存儲后端,并提供了一致的API來存儲和檢索數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于前端本地存儲方案localForage在vue3中使用的相關(guān)資料,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue父組件調(diào)用子組件方法報錯問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue結(jié)合AntV?G2的使用踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解Vue2+Echarts實現(xiàn)多種圖表數(shù)據(jù)可視化Dashboard（附源碼）
本篇文章主要介紹了詳解Vue2+Echarts實現(xiàn)多種圖表數(shù)據(jù)可視化Dashboard（附源碼），具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
Vue封裝localStorage設(shè)置過期時間的示例詳解
這篇文章主要介紹了Vue封裝localStorage設(shè)置過期時間的相關(guān)資料,在這個示例中,我們在MyComponent.vue組件的setup函數(shù)中導(dǎo)入了setItemWithExpiry和getItemWithExpiry函數(shù),并在函數(shù)內(nèi)部使用它們來設(shè)置和獲取帶有過期時間的localStorage數(shù)據(jù),需要的朋友可以參考下2024-06-06
Vue?使用postMessage?實現(xiàn)父子跨域通信
這篇文章主要介紹了Vue應(yīng)用?postMessage?實現(xiàn)父子跨域通信,通過示例介紹了postMessage的使用，本文結(jié)合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-12-12
Vue.js組件使用props傳遞數(shù)據(jù)的方法
這篇文章主要為大家詳細介紹了Vue.js組件使用props傳遞數(shù)據(jù)的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
本篇文章主要介紹了vue使用drag與drop實現(xiàn)拖拽的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue項目配置sass及引入外部scss文件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue項目獲取url中的參數(shù)，本文通過兩種情況分析給大家詳細介紹，感興趣的朋友一起看看吧2022-08-08