VUE中transition动画使用

        /* 

        .fade-enter           刚要显示的时候

        .fade-enter-active    整个显示过程的区间

        .fade-enter-to        显示完成

 

        .fade-leave           刚要消失的时候

        .fade-leave-active    整个消失过程的区间

        .fade-leave-to        消失完成

         */

 

 

        /* 在vue 中只用transition动画  只有 v-show  和v-if 才能触发  */

<transition name="fade">
            <!-- name 属性默认值是v -->
            <h1 v-show='flag'>{{name}}</h1>
        </transition>

        .fade-enter-active,
        .fade-leave-active {
            transition: opacity .5s;
        }

        .fade-enter,
        .fade-leave-to

        /* .fade-leave-active below version 2.1.8 */
            {
            opacity: 0;
        }

        .fade-enter-to,
        .fade-leave {
            opacity: 1;
        }