Vue3动画相关知识点

今天学习的是Vue3动画

---

前言

啦啦啦，又是新的篇章，加油吧，这一章节吃的不是很透啊，脑子蒙蒙的哈哈哈，硬着头皮吃吧。哈哈哈嗝~

自定义动画

  vue中使用自定义动画和过渡的使用跟css中差不多，也是在style中定义动画或过渡，然后通过动态绑定class的方式调用

<div id="app">
    <div>
      <div class="box" :class="animates">
        {
  {msg}}
      </div>
      <button @click="animates.animate=!animates.animate">开始/结束</button>
    </div>
  </div>

Vue内部封装好的动画

  想使用Vue内部封装的动画，必须用<transition></transition>包裹住要使用动画的元素
  因为Vue封装的动画会作用在transition标签内，如果有多个此标签将会全部都应用，为了避免这个，给transition标签加上name属性，对应的v-xxx也要改为 自定义名称-xxx

eg:lk-enter-active

动画/过渡动画

进场动画类

<style>
.v-enter-from{
    相应的操作}      /*进来的开始*/
.v-enter-active{
    …}    /*进来的中间时刻*/
.v-enter-to{
    …}        /*进来的结束*/
</style>

离场动画类

<style>
.v-leave-from{
    …} /*离开的开始*/
.v-leave-active{
    …} /*离开的中间时刻*/
.v-leave-to{
    …} /*离开的结束*/
</style>

以上两大类需要哪个就调用哪个即可

<div id="app">
    <div