92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

Vue中動畫的實現從基本動畫，到炫酷動畫?？催@一篇就夠了

2021-8-27 前端達人

文章目錄

Vue中的基本動畫實現

直接一點，基本動畫的步驟

在需要加動畫的地方，加入transition

<transition> <P v-if="isNum">我是一只小小鳥</P> </transition>  


    
        1
    

    
        2
    

    
        3

在style中寫vue已定義好的類名

 進入前和結束后的狀態
    .v-enter,.v-leave-to{ opacity: 0; transform: translateX(80px); } 進入和離開的動畫時間段
    .v-enter-active,.v-leave-active{ transition: all 0.5S ease }  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10

這樣就已經完成了基本動畫了，上完整代碼

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../node_modules/vue/dist/vue.min.js"></script> <style> 進入前和結束后的狀態 .v-enter,.v-leave-to{ opacity: 0; transform: translateX(80px); } 進入和離開的動畫時間段 .v-enter-active,.v-leave-active{ transition: all 0.5S ease } </style> </head> <body> <div id="box"> <button @click="tags">顯示/隱藏</button> <transition> <P v-if="isNum">我是一只小小鳥</P> </transition> </div> <script> new Vue({ el:'#box', data:{ isNum :true }, methods: { tags(){ this.isNum=!this.isNum; } }, }) </script> </body> </html>  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28
    

    
        29
    

    
        30
    

    
        31
    

    
        32
    

    
        33
    

    
        34
    

    
        35
    

    
        36
    

    
        37
    

    
        38
    

    
        39
    

    
        40
    

    
        41
    

    
        42
    

    
        43
    

    
        44
    

    
        45
    

    
        46
    

    
        47
    

    
        48
    

    
        49
    

    
        50

動畫類名的重定義

只需要在transition標簽上添加一個name屬性，然后把類名中v改成你定義的類名就可以了

<transition name='my'> <P v-if="isNum">我是一只小小鳥</P> </transition>  


    
        1
    

    
        2
    

    
        3

 進入前和結束后的狀態
    .my-enter,.my-leave-to{ opacity: 0; transform: translateX(80px); } 進入和離開的動畫時間段
    .my-enter-active,.my-leave-active{ transition: all 0.5S ease }  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10

使用第三方的動畫庫

第三方的動畫庫有很多
Animate、Anicollection、Cssshake、Animatable、Hover、Animations、JXAnimate、Spinkit、Velocity動畫、AlloyStick骨骼動畫引擎、Rocket、Cssynth、Stylie、Dynamicsjs、Anijs、Animsition、Parallax、Wow、Bouncejs、Easie、Greensock

我就選擇其中一個庫做示范其他都一樣

在使用第三方庫之前，需要在，你要做動畫的標簽上加個基本類
animated，這個基本類是根據每個庫不一樣而定的，
我們要用Animated，所以需要加

<transition name='my'> <P v-if="isNum" class="animated">我是一只小小鳥</P> </transition>  


    
        1
    

    
        2
    

    
        3

接著就是引入第三方庫，你們可以下載。
我比較懶，我就直接npm下載了。

npm install animate.css --save  


    
        1

然后引入文件

<link rel="stylesheet" href="../node_modules/animated/lib/Animated.js">  


    
        1

寫上類名，就行了，，提示，千萬別下錯文件，不然動畫也無法實現

 <!-- 進入用lightSpeedIn    離開用 lightSpeedOut --> <transition enter-active-class="lightSpeedIn" leave-active-class ="lightSpeedOut"> <P v-if="isNum" class="animated">我是一只小小鳥</P> </transition>  


    
        1
    

    
        2
    

    
        3

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：csdn

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

<p style="box-sizing:border-box;margin-top:0px;margin-bottom:1rem;font-size:16px;font-variant-ligatures:no-common-ligatures;white-space:normal;background-color:#FFFFFF;text-align:justify;color:rgba(0, 0, 0, 0.84);font-family:&quot;letter-spacing:0.1px;">
    <strong style="box-sizing:border-box;font-size:14px;font-family:微軟雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微軟雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><i style="box-sizing:border-box;"><a href="http://www.skdbbs.com/blog/admin" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;">藍藍設計</a>(&nbsp;<a href="http://www.skdbbs.com/" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#0C386E;transition:all 0.5s ease 0s;vertical-align:baseline;background-position:0px -60px;padding:0px;margin:0px;text-indent:34px;">www.skdbbs.com&nbsp;</a>)是一家專注而深入的<a href="http://www.skdbbs.com/index.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">界面設計公司</a>，為期望卓越的國內外企業提供卓越的UI界面設計、<a href="http://www.skdbbs.com/bs.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">BS界面設計&nbsp;</a>、&nbsp;<a href="http://www.skdbbs.com/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">cs界面設計&nbsp;</a>、&nbsp;<a href="http://www.skdbbs.com/scjm.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">ipad界面設計</a><a href="http://www.skdbbs.com/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">&nbsp;</a>、&nbsp;<a href="http://www.skdbbs.com/baozhuang.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">包裝設計&nbsp;</a>、&nbsp;<a href="http://www.skdbbs.com/icon.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">圖標定制&nbsp;</a>、&nbsp;<a href="http://www.skdbbs.com/yhty.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">用戶體驗 、交互設計、&nbsp;</a><a href="http://www.skdbbs.com/web.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">網站建設</a><a href="http://www.skdbbs.com/WEB.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">&nbsp;</a>、<a href="http://www.skdbbs.com/xz.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">平面設計服務</a></i></b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong> 
</p>

<div>
    <strong style="box-sizing:border-box;font-size:14px;font-family:微軟雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微軟雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"> </b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong> 
</div>

« 構建視覺層次的4個技巧 Vue中select的使用 »