【Vue】transition动画-CSDN博客

1.Vue 提供了 transition 的封装组件，可以给任何元素和组件添加进入/离开过渡

条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点

<transition name="fade">
    <p v-if="show">hello</p>
</transition>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}复制代码

动画运行的过程：

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

检测目标组件是否应用了 CSS 过渡(transtion)或动画(animation)，如果是，则添加/删除 CSS 类名。
如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

2.使用css3动画

 <transition name="bounce">
    <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
 </transition>

.bounce-enter-active {
  transform-origin:left center; //解决放大缩小可能遇到的问题
  animation: bounce-in .5s;
}
.bounce-leave-active {
  transform-origin:left center; //解决放大缩小可能遇到的问题
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}复制代码

3.自定义过渡的类名

<transition name="bounce" enter-active-class='active' leave-active-class='leave'>
    <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
 </transition>

.active {
  transform-origin:left center; //解决放大缩小可能遇到的问题
  animation: bounce-in .5s;
}
.leave {
  transform-origin:left center; //解决放大缩小可能遇到的问题
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}复制代码

使用animate.css 库动画

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1"  type="text/css">
  
  <transition
    name="custom-classes-transition" //类名随意
    enter-active-class="animated tada"   //animated必须写，否则无法进行动画
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
复制代码

4.同时使用过渡和动画

初始化渲染页面的动画

可以通过 appear 特性设置节点在初始渲染的过渡

css类名为swing
<transition
  appear //必须写，声明初始化渲染
  appear-class="swing" //可不写
  appear-to-class="swing" (2.1.8+)//版本需求
  appear-active-class="swing"
>
  <!-- ... -->
</transition>复制代码

5.动画的过渡时间

在这种情况下你可以用 <transition> 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：

<transition :duration="1000">...</transition>
复制代码

你也可以定制进入和移出的持续时间：

<transition :duration="{ enter: 500, leave: 800 }">...</transition>
复制代码

6.Javascript钩子（可配合Velocity.js）

<transition
  :before-enter="beforeEnter"
  :enter="enter"
  :after-enter="afterEnter"
  :enter-cancelled="enterCancelled"

  :before-leave="beforeLeave"
  :leave="leave"
  :after-leave="afterLeave"
  :leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>
复制代码

// ...
当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。
否则，它们将被同步调用，过渡会立即完成。methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}复制代码

7.多元素或组件过渡

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

给在 <transition> 组件中的多个元素设置 key 是一个更好的实践。

<transition mode='in-out'>   //in-out先进入后移除   out-in 先移除后进入
    <div v-if='show' key='hello'>hello</div>
    <div v-else key='bye'>bye</div>
</transition>复制代码

组件过渡动画可以使用is的特性来完成，不需要使用key来进行区分

8.列表过渡

<transition-group>

<transition-group name="list" tag="p">
    <span v-for="item in items" :key="item">
      {{ item }}
    </span>
</transition-group>复制代码

相当于

<transition>
  <span>
    {{ item }}
  </span>
  <span>
    {{ item }}
  </span>
  <span>
    {{ item }}
  </span>
</transition>复制代码