追境的笔记

# Vue过渡 & 动画原理

# 进入/离开 & 列表过渡

# 概述

  • 在 CSS 过渡和动画中自动应用 class
  • 可以配合使用第三方 CSS 动画库，如 Animate.css
  • 在过渡钩子函数中使用 JavaScript 直接操作 DOM
  • 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

在下列情形中，可以给任何元素和组件添加进入/离开过渡

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

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

  • 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。

  • 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。

  • 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

# 过渡的类名

  • v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

  • v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

  • v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

  • v-leave：（一般没用，因为下一帧就被移除，只显示1s/60帧 动画是 requestAnimationFrame实现的）定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

  • v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

  • v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

# 自定义过渡的类名

  • enter-class
  • enter-active-class
  • enter-to-class (2.1.8+)
  • leave-class 一般不用
  • leave-active-class
  • leave-to-class (2.1.8+)
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<transition
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
</transition>
1
2
3
4
5
6
7

# 通过appear可以定义第一次加载时的动效

如果有appear属性，则第一次加载dom也触发动效，否则第一次加载不触发

根据源码 源码/vue源码分析/src/platforms/web/runtime/modules/transition.js里的

第 57行 if (isAppear && !appear && appear !== '') { return }

当不传appear的时候直接return了。所以没有动画

当传入appear的时候

执行 下列两行代码

addTransitionClass(el, startClass)
addTransitionClass(el, activeClass)
1
2
 <transition
    enter-active-class="animated tada"
    :duration="{ enter: 30000, leave: 80000 }"
    leave-active-class="animated bounceOutRight"
    appear
    >
        <p v-if="show">直接使用第三方css动画</p>
    </transition>
1
2
3
4
5
6
7
8

组件生成调用堆栈

enter (transition.js:79)
_enter (transition.js:328)
invokeCreateHooks (patch.js:306)
createElm (patch.js:193)
patch (patch.js:712)
Vue._update (lifecycle.js:69)
updateComponent (lifecycle.js:190)
get (watcher.js:106)
Watcher (watcher.js:95)
mountComponent (lifecycle.js:197)
Vue.$mount (index.js:44)
Vue.$mount (entry-runtime-with-compiler.js:90)
init (create-component.js:51)
createComponent (patch.js:215)
createElm (patch.js:144)
createChildren (patch.js:290)
createElm (patch.js:191)
patch (patch.js:751)
Vue._update (lifecycle.js:69)
updateComponent (lifecycle.js:190)
get (watcher.js:106)
Watcher (watcher.js:95)
mountComponent (lifecycle.js:197)
Vue.$mount (index.js:44)
Vue.$mount (entry-runtime-with-compiler.js:90)
Vue._init (init.js:78)
Vue (index.js:14)
(anonymous) (1.html:44)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# key产生的bug

加入key，当show变化的时候可以触发button的过度效果。不加key组件会复用不触发效果。


 <transition
    enter-active-class="animated tada"
    :duration="{ enter: 30000, leave: 80000 }"
    leave-active-class="animated bounceOutRight"
    appear
    >
      <button v-bind:key="show">
        {{ show ? 'Save' : 'Edit' }}
      </button>
    </transition>
1
2
3
4
5
6
7
8
9
10
11

# 过渡模式 (opens new window)

简单不赘述

    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
   <transition
      enter-active-class="animated tada"
      leave-active-class="animated bounceOutRight"
      appear
      mode="out-in"
      >
        <p v-if="show" :key="Math.random()">直接使用第三方css动画</p>
        <p v-if="!show" :key="Math.random()">sdfdfsdf直接使用第三方css动画sdfdsfdfewrewrewr</p>

    </transition>
1
2
3
4
5
6
7
8
9
10
11
12

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

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

# 列表过渡 <transition-group>

  • 不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag attribute 更换为其他元素。
  • 过渡模式(in-out或者out-in)不可用，因为我们不再相互切换特有的元素。
  • 内部元素总是需要提供唯一的 key attribute 值。
  • CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。

接受name参数用于定义类名

接受tag参数用于定义渲染的标签

 <transition-group name="list" tag="ul">
    <li v-for="item in items" v-bind:key="item" class="list-item">
      {{ item }}
    </li>
  </transition-group>
1
2
3
4
5

# 过渡的类名

  • v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

  • v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

  • v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

  • v-leave：（一般没用，因为下一帧就被移除，只显示1s/60帧 动画是 requestAnimationFrame实现的）定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

  • v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

  • v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

  • v-move: 它会在元素的位置改变的过程中应用。像之前的类名一样，可以通过 name attribute 来自定义前缀，也可以通过 move-class attribute 手动设置

# 数据元素本身状态过渡

  • 数字和运算
  • 颜色的显示
  • SVG 节点的位置
  • 元素的大小和其他的 property

← 阅读vue源码经验 →