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

好的程序员是那种过单行道马路都要往两边看的人 ——Doug Linder

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

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

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

这里是一个典型的例子：

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>

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

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

过渡的类名

下面这段对理解比较重要

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

v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入一帧后生效 (与此同时 v-enter 被删除)，在 transition/animation 完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (与此同时 v-leave 被删除)，在 transition/animation 完成之后移除。

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

初始渲染的过渡

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

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

多个元素的过渡

1.利用属性 key (推荐)

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

可以重写为：

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

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

2.过渡模式

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

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

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

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

列表过渡

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

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

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

路由过渡动效

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

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

这里是一个codepen例子：

床前明月光，疑是地上霜。兴头望明月，低头思故乡。

参考

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