Vue进阶之路——过渡效果

发表于 | 分类于 | | 阅读次数
字数统计 1,900字 | 阅读时长 8分钟

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

概述

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：

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

单元素/组件的过渡

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡

  • 条件渲染 （使用 v-if）
  • 条件展示 （使用 v-show）
  • 动态组件
  • 组件根节点
    这里是一个典型的例子：
    HTMl:
    1
    2
    3
    4
    5
    6
    7
    8
    <div id="demo">
      <button v-on:click="show = !show">
        Toggle
      </button>
      <transition name="fade">
        <p v-if="show">hello</p>
      </transition>
    </div>

JS:

1
2
3
4
5
6
new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

CSS:

1
2
3
4
5
6
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0
}

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

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

  • 过渡的-CSS-类名

会有 6 个(CSS)类名在 enter/leave 的过渡中切换:

  1. v-enter
  2. v-enter-active
  3. v-enter-to
  4. v-leave
  5. v-leave-active
  6. v-leave-to

对于这些在 enter/leave 过渡中切换的类名，v- 是这些类名的前缀。使用 <transition name="my-transition"> 可以重置前缀，比如 v-enter替换为 my-transition-enter。

CSS 过渡

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter类名在节点插入 DOM 后不会立即删除，而是在animationend 事件触发时删除。

示例： (省略了兼容性前缀)

1
2
3
4
5
6
<div id="example-2">
  <button @click="show = !show">Toggle show</button>
  <transition name="bounce">
    <p v-if="show">Look at me!</p>
  </transition>
</div>

1
2
3
4
5
6
new Vue({
  el: '#example-2',
  data: {
    show: true
  }
})
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
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-out .5s;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounce-out {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(0);
  }
}

自定义过渡类名

我们可以通过以下特性来自定义过渡类名：

  • enter-class
  • enter-active-class
  • leave-class
  • leave-active-class

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" 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>

同时使用 Transitions 和 Animations

Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend或 animationend ，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。

JavaScript 钩子

1
2
3
4
5
6
7
8
9
10
11
12
<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>
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
29
30
31
32
33
34
35
36
37
38
39
40
// ...
methods: {
  // --------
  // 进入中
  // --------
  beforeEnter: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },
  // --------
  // 离开时
  // --------
  beforeLeave: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

这些钩子函数可以结合 CSS transitions/animations使用，也可以单独使用。

当只用 JavaScript 过渡的时候， 在 enter 和 leave 中，回调函数 done 是必须的 。 否则，它们会被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=”false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

初始渲染的过渡

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

1
2
3
<transition appear>
  <!-- ... -->
</transition>

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

1
2
3
4
5
6
7
<transition
  appear
  appear-class="custom-appear-class"
  appear-active-class="custom-appear-active-class"
>
  <!-- ... -->
</transition>

自定义 JavaScript 钩子：

1
2
3
4
5
6
7
8
<transition
  appear
  v-on:before-appear="customBeforeAppearHook"
  v-on:appear="customAppearHook"
  v-on:after-appear="customAfterAppearHook"
>
  <!-- ... -->
</transition>

多个元素的过渡

对于原生标签可以使用 v-if/v-else 。最常见的多标签过渡是一个列表和描述这个列表为空消息的元素：

1
2
3
4
5
6
<transition>
  <table v-if="items.length > 0">
<!-- ... -->
  </table>
  <p v-else>Sorry, no items found.</p>
</transition>

当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 <transition组件中的多个元素设置 key 是一个更好的实践。

1
2
3
4
5
6
7
8
<transition>
  <button v-if="isEditing" key="save">
    Save
  </button>
  <button v-else key="edit">
    Edit
  </button>
</transition>

过渡模式

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

多个组件的过渡

多个组件的过渡简单很多 - 我们不需要使用 key 特性。相反，我们只需要使用动态组件:

列表过渡

怎么同时渲染整个列表，比如使用v-for？在这种场景中，使用 <transition-group>组件。在我们深入例子之前，先了解关于这个组件的几个特点：

  • 不同于 <transition>， 它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag 特性更换为其他元素。
  • 内部元素 总是需要 提供唯一的 key 属性值

列表的位移过渡

<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move特性，它会在元素的改变定位的过程中应用。像之前的类名一样，可以通过 name 属性来自定义前缀，也可以通过 move-class 属性手动设置。
v-move 对于设置过渡的切换时机和过渡曲线非常有用，你会看到如下的例子：

本作品采用 知识共享署名 2.5 中国大陆许可协议 进行许可，欢迎转载，但转载请注明来自JayMo，并保持转载后文章内容的完整。本人保留所有版权相关权利。
本文永久链接：http://jaymo666.github.io/2017/09/21/Vue进阶之路——过渡效果/