實踐

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

這個案例其實很簡單，通過一個transition來觸發(fā)多個子元素的過渡效果，我們只需要定義元素對應(yīng)的過渡效果就可以，其他事情vue會幫我們搞定，由此可以擴展出其他酷炫的過渡場景效果。先來看看這個簡單案例的代碼實現(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 {