Vue动画组件的使用方法

Vue动画组件用法

第一步：将要实现动画的组件使用包裹起来，注意：必须添加name属性

<transition name="show">
    <div class="box" v-if="flag">六思逸</div>
</transition>

第二步：必须要设置对应的样式

入场和出场的动画

.名字-enter-active, .名字-leave-active {
  transition: all 1s;
}

入场和出场的样式

.名字-enter, .名字-leave-to {
  transform: translateY(-100%) scale(0) rotate(3600deg);
}

<keep-alive>缓存组件，将页面组件缓存起来，数据不会重置

<keep-alive>
   <router-view/>
</keep-alive>

<!--带包含功能，哪些组件需要缓存，注意：包含里面要写组件名称-->
<keep-alive :include="['HomeView']">
    <router-view/>
</keep-alive>