vue动画的基础实践，和一些小细节

动画基础

动画实现的前提：

1. 在<transiton>的包裹中

2. 被包裹的元素必须有插入，显示，删除等操作 v-if、v-show、动态组件

 

 

 

 

常用的一组设置，统一了进入和离开

// 元素消失后的样式
.v-enter,
.v-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

// 进入和离开的动画
.v-enter-active,
.v-leave-active {
  transition: all 1s ease;
}

容易忽略的细节：

　　当有相同标签名的元素切换时，基于vue的diff更新的原理， 也就是说相同的节点切换，vue会尽最大可能的复用节点，只会替换节点的内容

　　所以，最好的实践是给标签设置key，让vue更好的去区分他们。

 

 

appear-初始化渲染

可以理解为watch的immediate属性😆

 <transition appear>
   <!-- ... -->
 </transition>

 

多元素切换

当多元素切换时，会发现转换会非常突兀

这是因为，当节点1消失的同时，节点2被创建了，也就是在动画期间，两个节点同时被销毁创建，进入和离开的动画同时发生

 

vue提供了过渡模式来解决这个问题

1. mode=“out-in”

   先让上一个节点离开，等上一个节点的离开动画结束后，再让新节点进入

2. mode=“in-out”

   先让新节点进入，再让旧节点离开

 <el-button type="primary" @click="isShow = !isShow">change</el-button>
 <transition  mode="out-in">
   <p v-if="isShow" key="1">我是一号</p>
   <p v-else key="2">O V O</p>
 </transition>

 

animated动画库

enter-active-class:指定进入时的类名

leave-active-class:指定离开时的类名

:duration="Number/Object" : 动画时长

 <div>
   <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
   <el-button type="primary" @click="isShow = !isShow">change</el-button>
   <transition
               mode="out-in"
               enter-active-class="animate__animated animate__zoomIn"
               leave-active-class="animate__animated animate__zoomOut"
               :duration="{ enter: 500, leave: 1000 }"
               >
     <p v-if="isShow" key="1">我是一号</p>
     <p v-else key="2">O V O</p>
   </transition>
 </div>