vue動畫效果實(shí)現(xiàn)方法示例
更新時間：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>m.fzitv.net 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)多個元素或多個組件之間動畫效果
相關(guān)文章
關(guān)于keep-alive路由多級嵌套不生效的解決方案
本文主要介紹了關(guān)于keep-alive路由多級嵌套不生效的解決方案，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue+echart?展示后端獲取的數(shù)據(jù)實(shí)現(xiàn)
本文主要介紹了Vue+echart?展示后端獲取的數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
element el-table如何實(shí)現(xiàn)表格動態(tài)增加/刪除/編輯表格行(帶校驗(yàn)規(guī)則)
這篇文章主要介紹了element el-table如何實(shí)現(xiàn)表格動態(tài)增加/刪除/編輯表格行(帶校驗(yàn)規(guī)則),本篇文章記錄el-table增加一行可編輯的數(shù)據(jù)列,進(jìn)行增刪改,感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了vue如何將對象中所有的key賦為空值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue @input和@click的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue.js中for循環(huán)如何實(shí)現(xiàn)異步方法同步執(zhí)行
這篇文章主要介紹了vue.js中for循環(huán)如何實(shí)現(xiàn)異步方法同步執(zhí)行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了vue組件中添加@click失效問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
詳解Vue基于vue-quill-editor富文本編輯器使用心得
這篇文章主要介紹了Vue基于vue-quill-editor富文本編輯器使用心得，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了Vue封裝功能組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家詳細(xì)介紹了vue左右滑動選擇日期組件封裝的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04