Vueのアニメーションパッケージ

<！DOCTYPE HTML > 
< HTML > 

    < ヘッド> 
        < メタ文字コード= "UTF-8" > 
        < タイトル> Vueの动画的封装</ タイトル> 
        < スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue/dist /vue.js」> </ スクリプト> 
        < スタイルタイプ= "テキスト/ cssの" > 
            .fade1入力し、
            .fade1-残し-に{ 
                不透明度：0 ; 
            } 
 
            .fade1入力して活性、
            。 
                遷移：不透明度1S 。
            } 
        </ スタイル> 
    </ ヘッド> 

    < 身体> 
        < div要素のid = "ルート" > 
            < fade1 ：ショー= "ショー" > 
                < divの> fade1 </ DIV > 
            </ fade1 > 
            < ボタン@click = "handleBtnClick" >トグル</ ボタン> 
            < > 
                < </ DIV > 
            </ fade2 > 
        </ DIV > 
        < スクリプトタイプ= "テキスト/ javascriptの" > 
            Vue.component（' fade1 ' 、{ 
                小道具：[ ' ショー' ]、
                テンプレート： ` 
                    < 遷移名= " fade1 " > 
                        < スロットv - もし= " ショー" > < / スロット>
                    < /遷移>
                `
            }）

            Vue.component（' fade2 ' 、{ 
                小道具：[ ' ショー' ]、
                テンプレート： ` 
                    < 遷移@Before - 入力= " handleBeforeEnter " @enter = " handleEnter " > 
                        < スロットv - もし= " ショー" > < / スロット> 
                    < / 遷移> 
                `、 
                方法：{
                    handleBeforeEnter（EL）{ 
                        el.style.color =  " 赤" 
                    }、
                    handleEnter（EL、行わ）{ 
                        たsetTimeout（（）=> { 
                            el.style.color =  ' 緑色' 
                            行わ（）
                        }、2000 ）
                    } 

                } 
            }）

            VaRのRM =  新しいヴュー（{ 
                エル：' #root ' 、
                データ：{ 
                    ショー：偽
                }、
                メソッド：{ 
                    handleBtnClick（）{ 
                        この.SHOW =  ！この.SHOW 
                    } 
                } 
            }）
        </ スクリプト> 
    </ ボディ> 

</ HTML >