Vue.js - Transition过渡动画的使用1（使用CSS过渡或动画）

2018-09-06 发布：hangge 阅读：3325

一、基本介绍

1，<transition> 组件

（1）如果某个元素或者组件需要使用过渡动画效果，只需使用 vue 提供的 <transition> 组件将其包裹起来封装成过渡组件。

（2）Vue 只有在插入，更新或者移除 DOM 元素时才会应用过渡效果，例如：

v-if（条件渲染）
v-show（条件展示）
动态组件
在组件的根节点上，并且被 vue 实例 DOM 方法触发。比如使用 appendTo 方法把组件添加到某个根节点上

2，过渡效果实现方式

过渡效果具体的实现方式分为如下两种：

利用 CSS 过渡或者动画来实现
利用 JavaScript 钩子函数来实现

3，动画执行逻辑

封装成过渡组件的元素被插入或者删除时，vue 将会做如下事情：

首先查找目标元素是否有 CSS 过渡或者动画，如果有就在适当的时候进行处理。
如果过渡组件设置了 JavaScript 钩子函数，vue 会在相应阶段调用钩子函数。
如果以上两者都没有，DOM 操作（插入或者删除）就在下一帧立即执行。

二、结合 CSS 实现动画效果

1，基本用法

（1）我们给 transition 的 name 属性设置一个值（比如：name="xxx"），那么在组件过渡过程中，会有如下六个 CSS 类名进行切换：

xxx-enter：进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。
xxx-enter-active：进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
xxx-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 xxx-enter 被移除)，在过渡/动画完成之后移除。（2.1.8 版加入）
xxx-leave：离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。
xxx-leave-active：离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。
xxx-leave-to：定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 xxx-leave 被删除)，在过渡/动画完成之后移除。（2.1.8 版加入）

（2）下面是一个简单的样例：

通过点击按钮对下方图片进行显示或隐藏（交替）。
在显示或隐藏的过程中，会有淡入淡出的效果。

<template>
  <div id="app">
    <button @click="show = !show">显示/隐藏</button>
    <br>
    <transition name="fade">
      <img v-show="show" src="./assets/logo.png">
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: function(){
    return {
      show: true
    }
  }
}
</script>

<style>
  .fade-enter-active, .fade-leave-active{
    transition: all 0.5s ease
  }

  .fade-enter, .fade-leave-active {
    opacity: 0
  }
</style>

2，自定义过渡类名

（1）前面的样例中六个过渡类名都是根据 transition 的 name 属性自动生成的，我们也可以通过 enter-class、enter-active-class、enter-to-class、leave-class、leave-active-class、leave-to-class 这六个属性来分别定义这六个类名。

<transition name="fade" mode="out-in"
  enter-class="fade-in-enter"
  enter-active-class="fade-in-active"
  enter-to-class="fad-in-end"
  leave-class="fade-out-enter"
  leave-active-class="fade-out-active"
  leave-to-class="fade-out-end">
  <component :is="currentView"></component>
</transition>

（2）自定义过渡类名的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</div>

3，通过 CSS 动画（animation）实现过渡效果

组件过渡效果不但可以通过 CSS 过渡实现，还可以通过 CSS 动画（关键帧动画）实现。

（1）效果图

通过点击按钮让下方图片进行显示或隐藏（交替）。
在显示或隐藏的过程中，图片除了会有淡入淡出的效果，还会左右摇摆逐渐放大（或逐渐缩小）

（2）样例代码

<template>
  <div id="app">
    <button @click="show = !show">显示/隐藏</button>
    <br>
    <transition name="fold">
      <img v-show="show" src="./assets/logo.png">
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: function(){
    return {
      show: true
    }
  }
}
</script>

<style>
  .fold-enter-active {
    animation-name: fold-in;
    animation-duration: .5s;
  }
  .fold-leave-active {
    animation-name: fold-out;
    animation-duration: 5.5s;
  }
  @keyframes fold-in {
    0% {
      opacity: 0;
      transform: scale(0.7) rotate(0deg);
    }
    33% {
      opacity: 0.33;
      transform: scale(0.8) rotate(5deg);
    }
    67% {
      opacity: 0.67;
      transform: scale(0.9) rotate(-5deg);
    }
    100% {
      opacity: 1.0;
      transform: scale(1.0) rotate(0deg);
    }
  }
  @keyframes fold-out {
    0% {
      opacity: 1.0;
      transform: scale(1.0) rotate(0deg);
    }
    33% {
      opacity: 0.67;
      transform: scale(0.9) rotate(-5deg);
    }
    67% {
      opacity: 0.33;
      transform: scale(0.8) rotate(5deg);
    }
    100% {
      opacity: 0;
      transform: scale(0.7) rotate(0deg);
    }
  }
</style>

4，显示地指定过渡持续时间

指定显性的过渡持续时间的作用：
（1）在很多情况下，Vue 会自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。
（2）然而也可以不这样设定——比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。

（1）我们可以用 <transition> 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：

<transition :duration="1000">...</transition>

（2）也可以分别指定进入和移出的持续时间：

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

附：初始渲染的过渡

（1）我们可以通过 appear 特性设置节点在初始渲染的过渡

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

（2）这里默认和进入/离开过渡一样，同样也可以自定义 CSS 类名。

<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class" (2.1.8+)
  appear-active-class="custom-appear-active-class"
>
  <!-- ... -->
</transition>