vue動畫效果實(shí)現(xiàn)方法示例
更新時(shí)間：2019年03月18日 11:59:16 作者：白楊-M
這篇文章主要介紹了vue動畫效果實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了vue.js+animate.css實(shí)現(xiàn)的動畫切換效果相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了vue動畫效果實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.dbjr.com.cn vue動畫</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<link rel="stylesheet" rel="external nofollow" />
<style>
#box{
width:400px;
margin: 0 auto;
}
#div1{
width:100px;
height:100px;
background: red;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="按鈕" @click="toggle">
<div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
</div>
<script>
new Vue({
el:'#box',
data:{
bSign:true
},
methods:{
toggle(){
this.bSign=!this.bSign;
}
},
transitions:{ //定義所有動畫名稱
bounce:{
enterClass:'zoomInLeft',//動畫進(jìn)入
leaveClass:'zoomOutRight'//動畫離開
}
}
});
</script>
</body>
</html>
運(yùn)行效果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
希望本文所述對大家vue.js程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- vue實(shí)現(xiàn)app頁面切換動畫效果實(shí)例
- vue實(shí)現(xiàn)頁面加載動畫效果
- vuejs實(shí)現(xiàn)折疊面板展開收縮動畫效果
- 5分鐘學(xué)會Vue動畫效果(小結(jié))
- vue.js 實(shí)現(xiàn)點(diǎn)擊展開收起動畫效果
- Vue入門之a(chǎn)nimate過渡動畫效果
- Vue頁面跳轉(zhuǎn)動畫效果的實(shí)現(xiàn)方法
- vue router自動判斷左右翻頁轉(zhuǎn)場動畫效果
- Vue 進(jìn)入/離開動畫效果
- Vue2路由動畫效果的實(shí)現(xiàn)代碼
- vue實(shí)現(xiàn)多個(gè)元素或多個(gè)組件之間動畫效果
相關(guān)文章
vue3中調(diào)用api接口實(shí)現(xiàn)數(shù)據(jù)的渲染以及詳情方式
這篇文章主要介紹了vue3中調(diào)用api接口實(shí)現(xiàn)數(shù)據(jù)的渲染以及詳情方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
前端的數(shù)據(jù)均是通過接口請求拿到的，而Vue本身不支持ajax請求，那么該怎么解決Vue中的異步請求呢？這兒提供了幾種方法，希望對大家有所幫助2022-05-05
這篇文章主要介紹了Vue編譯器實(shí)現(xiàn)代碼生成方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01
springboot+vue+對接支付寶接口+二維碼掃描支付功能（沙箱環(huán)境）
這篇文章主要介紹了springboot+vue+對接支付寶接口+二維碼掃描支付（沙箱環(huán)境）,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
這篇文章主要介紹了Vue 按鍵修飾符的相關(guān)資料，vue中新增按鍵修飾符和系統(tǒng)修飾符來處理類似的事件，具體內(nèi)容詳情大家參考下本文2018-05-05
這篇文章主要為大家詳細(xì)介紹了vue使用highcharts自定義儀表盤圖表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
使用vue-cli初始化項(xiàng)目時(shí)運(yùn)行‘npm run dev’報(bào)錯(cuò)及解決
這篇文章主要介紹了使用vue-cli初始化項(xiàng)目時(shí)運(yùn)行‘npm run dev’報(bào)錯(cuò)及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
組件是Vue.js的最核心的功能,所謂的組件化就是把頁面拆分成多個(gè)組件,每個(gè)組件單獨(dú)使用CSS,JS,模板,圖片等資源進(jìn)行開發(fā)與維護(hù),然后在制作網(wǎng)頁的時(shí)候根據(jù)需要調(diào)用相關(guān)的組件,這篇文章主要給大家介紹了關(guān)于vue.js全局組件和局部組件的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了Vue2.0 UI框架ElementUI的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
Vite默認(rèn)集成了對Sass的支持,你只需要安裝Sass本身即可,這篇文章主要介紹了vite 項(xiàng)目中如何使用Sass,需要的朋友可以參考下2024-04-04