vue動(dòng)畫(huà)效果實(shí)現(xiàn)方法示例
更新時(shí)間：2019年03月18日 11:59:16 作者：白楊-M
這篇文章主要介紹了vue動(dòng)畫(huà)效果實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了vue.js+animate.css實(shí)現(xiàn)的動(dòng)畫(huà)切換效果相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了vue動(dòng)畫(huà)效果實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>chabaoo.cn vue動(dòng)畫(huà)</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:{ //定義所有動(dòng)畫(huà)名稱
bounce:{
enterClass:'zoomInLeft',//動(dòng)畫(huà)進(jìn)入
leaveClass:'zoomOutRight'//動(dòng)畫(huà)離開(kāi)
}
}
});
</script>
</body>
</html>
運(yùn)行效果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- vue實(shí)現(xiàn)app頁(yè)面切換動(dòng)畫(huà)效果實(shí)例
- vue實(shí)現(xiàn)頁(yè)面加載動(dòng)畫(huà)效果
- vuejs實(shí)現(xiàn)折疊面板展開(kāi)收縮動(dòng)畫(huà)效果
- 5分鐘學(xué)會(huì)Vue動(dòng)畫(huà)效果(小結(jié))
- vue.js 實(shí)現(xiàn)點(diǎn)擊展開(kāi)收起動(dòng)畫(huà)效果
- Vue入門之a(chǎn)nimate過(guò)渡動(dòng)畫(huà)效果
- Vue頁(yè)面跳轉(zhuǎn)動(dòng)畫(huà)效果的實(shí)現(xiàn)方法
- vue router自動(dòng)判斷左右翻頁(yè)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)效果
- Vue 進(jìn)入/離開(kāi)動(dòng)畫(huà)效果
- Vue2路由動(dòng)畫(huà)效果的實(shí)現(xiàn)代碼
- vue實(shí)現(xiàn)多個(gè)元素或多個(gè)組件之間動(dòng)畫(huà)效果
相關(guān)文章
vue3中調(diào)用api接口實(shí)現(xiàn)數(shù)據(jù)的渲染以及詳情方式
這篇文章主要介紹了vue3中調(diào)用api接口實(shí)現(xiàn)數(shù)據(jù)的渲染以及詳情方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
前端的數(shù)據(jù)均是通過(guò)接口請(qǐng)求拿到的，而Vue本身不支持ajax請(qǐng)求，那么該怎么解決Vue中的異步請(qǐng)求呢？這兒提供了幾種方法，希望對(duì)大家有所幫助2022-05-05
這篇文章主要介紹了Vue編譯器實(shí)現(xiàn)代碼生成方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-01-01
springboot+vue+對(duì)接支付寶接口+二維碼掃描支付功能（沙箱環(huán)境）
這篇文章主要介紹了springboot+vue+對(duì)接支付寶接口+二維碼掃描支付（沙箱環(huán)境）,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
這篇文章主要介紹了Vue 按鍵修飾符的相關(guān)資料，vue中新增按鍵修飾符和系統(tǒng)修飾符來(lái)處理類似的事件，具體內(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à)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
組件是Vue.js的最核心的功能,所謂的組件化就是把頁(yè)面拆分成多個(gè)組件,每個(gè)組件單獨(dú)使用CSS,JS,模板,圖片等資源進(jìn)行開(kāi)發(fā)與維護(hù),然后在制作網(wǎng)頁(yè)的時(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)集成了對(duì)Sass的支持,你只需要安裝Sass本身即可,這篇文章主要介紹了vite 項(xiàng)目中如何使用Sass,需要的朋友可以參考下2024-04-04