實(shí)踐

這里將通過(guò)四個(gè)實(shí)踐小案例來(lái)體驗(yàn)和學(xué)習(xí)css過(guò)渡，css動(dòng)畫，javascript鉤子，列表過(guò)渡的應(yīng)用。至于案例用到的知識(shí)點(diǎn)就請(qǐng)自行學(xué)習(xí)官網(wǎng)文檔。
css過(guò)渡--實(shí)踐
先來(lái)看看demo效果：

這個(gè)案例其實(shí)很簡(jiǎn)單，通過(guò)一個(gè)transition來(lái)觸發(fā)多個(gè)子元素的過(guò)渡效果，我們只需要定義元素對(duì)應(yīng)的過(guò)渡效果就可以，其他事情vue會(huì)幫我們搞定，由此可以擴(kuò)展出其他酷炫的過(guò)渡場(chǎng)景效果。先來(lái)看看這個(gè)簡(jiǎn)單案例的代碼實(shí)現(xiàn)：

<template>
    <div class="app">
        <button @click="showMenu" class="btn">{{text}}</button>
        <transition name="move">
            <div class="menu" v-show="show">
                <div class="inner inner-1">1</div>
                <div class="inner inner-2">2</div>
                <div class="inner inner-3">3</div>
            </div>
        </transition>
    </div></template><script type="text/ecmascript-6">
    export default {
        data () {            return {