Vue过渡 & 动画

Vue过渡 & 动画

在进入/离开的过渡中，会有 6 个 class 切换

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to：2.1.8 版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to：2.1.8 版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

---

单元素/组件过渡

css过渡

.v-enter-active,
.v-leave-active {
  transition: all 3s;
}
.v-enter {/*进入开始的时候*/
  opacity: 0;
}
.v-enter-to {/*进入过程结束的时候*/
  opacity: 1;
}
.v-leave {/*离开开始的时候*/
  opacity: 1;
}
.v-leave-to { /*离开过程结束的时候*/
  opacity: 0;
}

<transition>
  <div v-if="isShow">11111111111111111</div>
  <p v-else>22222222222222222</p>
</transition>

**注意：**如果没有给transition命名（name属性），则 v- 是这些类名的默认前缀；如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

---

css动画

.b-enter-active{
  animation: aaa 2s;
}
.b-leave-active{
  animation: aaa 2s reverse;
}

@keyframes aaa{
  0%{
    opacity: 0;
    transform:translateX(100px)
  }
  100%{
    opacity: 1;
    transform: translateX(0px);
  }

---

结合 animate.css 动画库

<transition
    leave-active-class="animated fadeOut"
    enter-active-class="animated slideInLeft">
    <p v-if="isShow" class="box"></p>
</transition>

---

多个元素过渡

当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

<transition>
  <div v-if="isShow">11111111111111111</div>
  <div v-else>22222222222222222</div>
</transition>

因为 Vue 的 diff 算法，新老虚拟 dom 对比时，发现标签类型一致的时候，会直接跟换文本内容，就没有更换页面元素标签，所以不会触发过渡

解决方法：给每一个标签绑定一个独一无二的 key 属性，这样在对比的时候，就会发现元素节点的不同，就会替换该元素节点

<transition>
  <div v-if="isShow" :key="1">11111111111111111</div>
  <div v-else :key="2">22222222222222222</div>
</transition>

列表过渡（设置key）

不同于 transition， 它会以一个真实元素呈现：默认为一个 span元素。你也可以 通过 tag 特性更换为其他元素。

每个 <transition-group> 的子节点必须有 独立的 key ，动画才能正常工作

appear属性实现页面刚刚初始数据展示时的入场效果

<transition-group appear tag="ul">
  <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
    {{item.name}}
  </li>
</transition-group>

过渡模式

in-out: 新元素先进行过渡，完成之后当前元素过渡离开

out-in: 当前元素先进行过渡，完成之后新元素过渡进入

<transition
            name="cc"
            enter-active-class="animated flipInX"
            leave-active-class="animated hinge"
            mode="out-in"
            >
  <div v-if="isShow" :key="1">11111111111111111</div>
  <div v-else :key="2">22222222222222222</div>
</transition>

---

以上就是关于 Vue 的过渡与动画的学习总结，如有不对，欢迎指出