单元素/组件的进入/离开过渡

当插入或删除包含在 transition 组件中的元素时，可以应用过渡动画。

1、transition法

在进入时，元素有 class 的切换，其流程为：

元素插入DOM树 --------> v-enter-active和v-enter ----（立即）----> v-enter-active和v-enter-to --------> 全部移除

离开时：

v-leave-active和v-leave-to ----（立即）----> v-leave-active和v-leave --------> 移出DOM树

active全程都存在，因此在active类使用transition属性。

【通用CSS写法】：

enter-active和leave-active类放在一起，enter和leave-to类放在一起，enter-to和leave一般不用：

.v-enter-active, .v-leave-active{
    transition: /* ... */
}
.v-enter .v-leave-to{
    /* 刚进入、离开前 */
}

不用enter、enter-to、leave、leave-to，仅使用两个active和一个keyframes动画即可：

.v-enter-active{
    animation: xxx 1s;
}
.v-leave-active{
    animation: xxx 1s reverse;
}
@keyframes xxx{
    /* ... */
}

可用自定义类名，结合使用第三方动画库，如 Animate.css。

参见文档

注意设置key

可以使用过度模式：out-in、in-out

用<transition-group>标签，里面使用v-for，注意设置key

使用动态组件：

<component v-bind:is="view"></component>

这种方法不需要设置key