vue2.0的動(dòng)畫(huà)和1.0的動(dòng)畫(huà)

相對(duì)于vue1.0來(lái)說(shuō)函匕,vue2.0的動(dòng)畫(huà)變化還是挺大的,在1.0中蚪黑,直接在元素中加 transition 盅惜,后面跟上名字。而在vue2.0中忌穿,需要把設(shè)置動(dòng)畫(huà)的元素抒寂、路由放在<transition name="fade"></transition>標(biāo)簽中,name就是動(dòng)畫(huà)名稱(chēng)掠剑。

在1.0時(shí)屈芜,css需要設(shè)置(動(dòng)畫(huà)名稱(chēng)以fade為例).fade-transition .fade-enter .fade-leave

vue1.0動(dòng)畫(huà)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>vue1.0動(dòng)畫(huà)</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style>
        .oDiv {
            width: 200px;
            height: 200px;
            border: 3px dashed red;
            background: coral;
        }

        .fade-transition {
            transition: 2s all ease;
        }

        .fade-enter {
            opacity: 0;
        }

        .fade-leave {
            opacity: 0;
            transform: translate(200px);
        }
    </style>
</head>
<body>
<div id="box">
    <input type="button" value="button" @click="toggle()"/>
    <div class="oDiv" v-show="Dist" transition="fade">{{Dist}}</div>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#box',
        data: {
            Dist: false
        },
        methods: {
            toggle: function () {
                this.Dist = !this.Dist;
            }
        }
    })
</script>
</html>

在2.0時(shí),css設(shè)置大改朴译,.fade-enter{}元素初始狀態(tài) .fade-enter-active{}元素最終狀態(tài) .fade-leave-active{} 元素離開(kāi)的最終狀態(tài)

vue2.0動(dòng)畫(huà)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>vue2.0動(dòng)畫(huà)</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style>
        p{
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
        .donghua-enter-active,
        .donghua-leave-active{
             transition: 5s all ease;
        }
        .donghua-enter-active{
            opacity: 1;
            width: 300px;
            height: 300px;
        }
        .donghua-leave-active{
            opacity: 0;
            width: 100px;
            height: 100px;
        }
        .donghua-enter,.donghua-leave{
            opacity: 0;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="box">
    <input type="button" value="點(diǎn)擊顯示隱藏" @click="show=!show">
    <transition name="donghua">
        <p v-show="show"></p>
    </transition>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#box',
        data: {
            show: false
        }
    })
</script>
</html>

在2.0中井佑,依然可以與animate.css結(jié)合起來(lái)一起寫(xiě)動(dòng)畫(huà)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
    <title>配合animate.css做動(dòng)畫(huà)</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style>
        p{
            width: 300px;
            height: 300px;
            background-color: yellow;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="box">
    <input type="button" value="點(diǎn)擊顯示隱藏" @click="show=!show">
    <transition enter-active-class="zoomOutDown" leave-active-class="zoomOutUp">
        <p v-show="show" class="animated"></p>
    </transition>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#box',
        data: {
            show: false
        }
    })
</script>
</html>

在2.0中,關(guān)于動(dòng)畫(huà)還為我們提供了一些事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>動(dòng)畫(huà)事件</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style>
        p{
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
        .donghua-enter-active,
        .donghua-leave-active{
            transition: 5s all ease;
        }
        .donghua-enter-active{
            opacity: 1;
            width: 300px;
            height: 300px;
        }
        .donghua-leave-active{
            opacity: 0;
            width: 100px;
            height: 100px;
        }
        .donghua-enter,.donghua-leave{
            opacity: 0;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="box">
    <input type="button" value="點(diǎn)擊顯示隱藏" @click="show=!show">
    <transition name="donghua"
                @before-enter="beforeEnter"
                @enter="Enter"
                @after-enter="afterEnter"
                @before-leave="beforeLeave"
                @leave="Leave"
                @after-leave="afterLeave"
    >
        <p v-show="show"></p>
    </transition>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#box',
        data: {
            show: false
        },
        methods: {
            beforeEnter() {
                console.log("<!-- 進(jìn)入動(dòng)畫(huà)開(kāi)始之前 -->");
            },
            Enter() {
                console.log("<!-- 正式進(jìn)入動(dòng)畫(huà) -->");
            },
            afterEnter(el) {
                console.log("<!-- 動(dòng)畫(huà)結(jié)束 -->");
            },
            beforeLeave(el) {
                console.log("<!-- 離開(kāi)動(dòng)畫(huà)開(kāi)始之前 -->");
                el.style.background='blue';    //改變顏色
                el.innerHTML="123";
            },
            Leave(){
                console.log("<!-- 正在離開(kāi)動(dòng)畫(huà)-->");
            },
            afterLeave(){
                console.log("<!-- 離開(kāi)動(dòng)畫(huà)結(jié)束 -->");
            },
        }
    })
</script>
</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末眠寿,一起剝皮案震驚了整個(gè)濱河市躬翁,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌盯拱,老刑警劉巖姆另,帶你破解...
    沈念sama閱讀 223,126評(píng)論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件喇肋,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡迹辐,警方通過(guò)查閱死者的電腦和手機(jī)蝶防,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)明吩,“玉大人间学,你說(shuō)我怎么就攤上這事∮±螅” “怎么了低葫?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,941評(píng)論 0 366
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)仍律。 經(jīng)常有香客問(wèn)我嘿悬,道長(zhǎng),這世上最難降的妖魔是什么水泉? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,294評(píng)論 1 300
  • 正文 為了忘掉前任善涨,我火速辦了婚禮,結(jié)果婚禮上草则,老公的妹妹穿的比我還像新娘钢拧。我一直安慰自己,他們只是感情好炕横,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,295評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布源内。 她就那樣靜靜地躺著,像睡著了一般份殿。 火紅的嫁衣襯著肌膚如雪膜钓。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,874評(píng)論 1 314
  • 那天卿嘲,我揣著相機(jī)與錄音呻此,去河邊找鬼。 笑死腔寡,一個(gè)胖子當(dāng)著我的面吹牛焚鲜,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播放前,決...
    沈念sama閱讀 41,285評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼忿磅,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了凭语?” 一聲冷哼從身側(cè)響起葱她,我...
    開(kāi)封第一講書(shū)人閱讀 40,249評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎似扔,沒(méi)想到半個(gè)月后吨些,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體搓谆,經(jīng)...
    沈念sama閱讀 46,760評(píng)論 1 321
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,840評(píng)論 3 343
  • 正文 我和宋清朗相戀三年豪墅,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了泉手。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,973評(píng)論 1 354
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡偶器,死狀恐怖斩萌,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情屏轰,我是刑警寧澤颊郎,帶...
    沈念sama閱讀 36,631評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站霎苗,受9級(jí)特大地震影響姆吭,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜唁盏,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,315評(píng)論 3 336
  • 文/蒙蒙 一内狸、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧升敲,春花似錦、人聲如沸轰传。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,797評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)获茬。三九已至港庄,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間恕曲,已是汗流浹背鹏氧。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,926評(píng)論 1 275
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留佩谣,地道東北人把还。 一個(gè)月前我還...
    沈念sama閱讀 49,431評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像茸俭,于是被迫代替她去往敵國(guó)和親吊履。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,982評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • Vue2.0的過(guò)渡系統(tǒng)(transition)有了很大的改變调鬓,想把1.0的項(xiàng)目遷移到2.0艇炎,著實(shí)需要費(fèi)一些功夫,今...
    艱苦奮斗的侯小憨閱讀 8,154評(píng)論 0 6
  • Vue 實(shí)例 屬性和方法 每個(gè) Vue 實(shí)例都會(huì)代理其 data 對(duì)象里所有的屬性:var data = { a:...
    云之外閱讀 2,222評(píng)論 0 6
  • 前言 vue1.0版本和2.0版本的過(guò)渡系統(tǒng)改變還是蠻徹底的腾窝,具體請(qǐng)自行詳看文檔介紹:https://vuefe....
    JR93閱讀 3,437評(píng)論 5 27
  • Vue動(dòng)畫(huà) 2.0動(dòng)畫(huà)定義的幾個(gè)class1.name-enter{} 動(dòng)畫(huà)開(kāi)始的初始狀態(tài)2.name-enter...
    coolheadedY閱讀 250評(píng)論 0 0
  • 生活就像這只鴨子缀踪,表面都從容淡定居砖,其實(shí)水底下在拼命的劃水,想要過(guò)好生活驴娃,就要拼命劃奏候。 否則,當(dāng)父母需要我們時(shí)托慨,除...
    白天太短恨夜太長(zhǎng)閱讀 401評(píng)論 0 1