Vuejs过渡动效(赋设计以生命)

5 minute read

一个好的交互应该是顺畅的、礼貌的、理智的

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

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

这里是一个典型的例子：

1<div id="demo">
2  <button v-on:click="show = !show">
3    Toggle
4  </button>
5  <transition name="fade">
6    <p v-if="show">hello</p>
7  </transition>
8</div>

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

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

过渡的类名

下面这段对理解比较重要

在进入/离开的过渡中，会有 6 个 class 切换。

  1. v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

  2. v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

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

  4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

  5. v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

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

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

初始渲染的过渡

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

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

多个元素的过渡

1.利用 属性 key (推荐)

 1<transition>
 2  <button v-if="docState === 'saved'" key="saved">
 3    Edit
 4  </button>
 5  <button v-if="docState === 'edited'" key="edited">
 6    Save
 7  </button>
 8  <button v-if="docState === 'editing'" key="editing">
 9    Cancel
10  </button>
11</transition>

可以重写为：

1<transition>
2  <button v-bind:key="docState">
3    {{ buttonMessage }}
4  </button>
5</transition>

 1// ...
 2computed: {
 3  buttonMessage: function () {
 4    switch (this.docState) {
 5      case 'saved': return 'Edit'
 6      case 'edited': return 'Save'
 7      case 'editing': return 'Cancel'
 8    }
 9  }
10}

2.过渡模式

在多个元素过渡时，这些元素会同时出发，vue 提供了两个属性，在 中加入 mode 属性，它有两个值

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

B.out-in: 当前元素先进行过渡，完成之后新元素过渡进入。 当把上面例子中mode=“in-out”

改为mode=“out-in"时，效果是不一样。

列表过渡

列表的进入/离开过渡,
列表的排序过渡(FLIP 动画不仅可以实现单列过渡，多维网格也同样可以过渡),
列表的交错过渡

<transition-group> 组件。了解关于这个组件的几个特点：

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

路由过渡动效

<router-view> 是基本的动态组件，所以我们可以用 组件给它添加一些过渡效果：

1<transition>
2  <router-view></router-view>
3</transition>

这里是一个codepen例子：

参考

Vue过渡 & 动画Transition
Vue.js学习笔记：过渡效果（含列表过渡）