Vue 应用中添加过场动画效果(一)

过场动画能提升应用的用户交互体验，Vue 对各种动画方法提供了一个包装组件 - transition, 通过 tansition 组件，可以轻松的制作成漂亮的过程动画。

transition 支持的场景

tansition 组件支持以下几种场景:

条件渲染 v-if
条件显示 v-show
动态组件
组件的根节点
路由切换

使用样例

我们使用 vue-cli 新建的项目框架为基础来构建样例。在 vue-cli 构建好的项目框架中，找到 src\components\HelloWorld.vue 文件，

将原来 template 的部分替换为以下代码:

<div>
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="slide-fade">
    <div v-show="show">
      <p >Hello</p>
      <img src="../assets/logo.png"/>
    </div>
  </transition>
</div>

可以看到，我们在 transition 中放置了一个文本和一张图片，并通过变量 show 来控制这两个元素是否显示。

将 script 部分的代码替换为:

export default {
  name: 'HelloWorld',
  data: () => {
    return {
      show: true
    }
  }
}

可以看到我们定义了变量 show。

在 style 中添加以下 CSS

.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-active {
  padding-left: 10px;
  opacity: 0;
}

可以看到，上面的 CSS 定义了要给谈出的效果。注意 CSS 选择器的名字是和 transition 的 name 属性相匹配的。实际上定义了过场动画的四个阶段，分别是:

v-enter
v-enter-to
v-leave
v-leave-to

而每个 active 实际上包括了从开始到结束的整个过程，比如 v-enter-active 就包括了从 v-enter 到 v-enter-to 的过程。