关于前端:Vue2-transition组件过渡动画的使用1

10次阅读

共计 3744 个字符，预计需要花费 10 分钟才能阅读完成。

一、根本介绍

1，<transition> 组件
（1）如果某个元素或者组件须要应用过渡动画成果，只需应用 vue 提供的 <transition> 组件将其包裹起来封装成过渡组件。
（2）Vue 只有在插入，更新或者移除 DOM 元素时才会利用过渡成果，例如：
1. v-if（条件渲染）
2. v-show（条件展现）
3. 动静组件
4. 在组件的根节点上，并且被 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>

正文完