vue2初始化渲染过度，单元素，多元素，组件，动态

初始化渲染的过渡

默认是状态是显示，如果希望刷新页面时，盒子的显示也应用过渡效果，可以在transition组件中添加appear属性

<transition appear
      enter-active-class="animate__animated animate__zoomIn animate__delay-2s"
    >

单元素

在transition下面，只有一个根标签,可以在里面嵌套别的

<transition appear
      enter-active-class="animate__animated animate__zoomIn animate__delay-2s"
    >
 <div class="box">
    <p></p>
 </div>

单组件

跟元素差不多一样，都在放在tranition默认也是使用v-enter…（6个class）

多元素

• 多个根节点，如果标签一样，要给每个标签设置唯一的key的值；比如都是img；否则，vue为了提高效率，只会更新元素的内部的内容，不会删除和插入新元素

• 通过类只有在元素插入和删除的过程中才会生效，所以元素切换就不会有过度的效果

• 即使不是同一个元素（