案例：魔幻的事项列表

学习完本章的 Vue.js 动画内容之后，就有能力改造我们的项目，使其变得多彩炫动，用户体验更加丰富。还是以前面的待办事项系统为例添加 Vue.js 动画效果，让其更加魔幻。

功能描述

主要功能和前面的待办事项系统功能一致，利用 Vue.js 元素的动画 API 和第三方 CSS 3 动画库 Animate.css 来实现，主要动画改造如下：

  • 待办事项列表添加列表交错过渡和渐隐动画效果。

  • 待办事项和回收站切换添加渐隐渐现动画效果。

  • 弹跳的清空按钮。

  • 通用布局和样式修改。

案例完整代码

这里举几个核心动画改造的例子。例如，在添加待办事项时，给事项列表添加 <transition-group> 组件，并应用对应的 CSS，修改 todo.vue，代码如下：

...
<div class="s-wrap">
    <transition-group name="list-complete" tag="div">
        <div v-for="item in state.todoItems" class="list-complete-item" :key="item.id">
            <titem :item="item" @delete="deleteItem" @complete="completeItem"></titem>
        </div>
    </transition-group>
</div>
...
.list-complete-item {
    transition: all 0.8s ease; /* 全状态添加过渡 */
}
/* 动画进入和离开时应用 CSS 样式 */
.list-complete-enter-from,
.list-complete-leave-to {
    opacity: 0; /* 渐隐效果 */
    transform: translateY(20px);  /* 向下移动 */
}
...

在添加或者删除待办事项时，从数组头部添加，动画效果更明显，同时打乱数组顺序，即让列表交错动起来，代码如下：

/**
 * 创建事项
 */
function saveTodo() {
    ...
    // 将事项从头部存入列表
    state.todoItems.unshift({
        id: Math.random().toString(36).substr(2, 5),// 获取随机ID值
        content: state.newTodoContent// 设置内容
    })
}
...
/**
 * 打乱顺序
 */
function shuffleList() {
    state.todoItems = _.shuffle(state.todoItems)
}

上面的代码中，利用了 lodash 的 shuffle 方法，需要在 index.html 中引入 lodash.min.js。

例如，在事项列表和回收站切换时，添加渐隐渐现效果，需要对 app.vue 代码进行改造，代码如下：

<transition enter-active-class="fadeIn animated faster"  leave-active-class="fadeOut animated faster">
    <component :is="currentPage"></component>
</transition>

上面的代码中，直接使用了 Animate.css 的样式，即 fadeIn，并配置在 <transition> 中，同时采用了动态组件 <component> 来代替之前的 v-show 判断切换两个组件，需要在 index.html 中引入 animate.min.css。

例如，通用样式修改中，主要将 todo.vue 和 recycle.vue 的布局由原先的 block 改为 absolute，这样做的原因是切换时不会占用空间，使动画更加流畅，然后对于事项列表添加滚动条，代码如下：

    position: absolute;/* 绝对定位 */
    background: #ededed;/* 设置背景颜色 */
    left: 16px;/* 设置位置 */
    right: 16px;
    top:90px;
}
.s-wrap {
    overflow-y:auto;/* 设置可纵向滚动 */
    height: 208px;
}

以上只列举了核心的动画源码，具体的业务逻辑代码不再列举，读者可参考完整源码，执行 npm run serve 命令即可启动完整源码程序。

本案例完整源码在：/案例源码/Vue.js动画。

小结与练习

本章主要讲解了 Vue 实现动画的相关用法，主要包括过渡和动画效果的实现。

本章内容比较独立，对于使用 Vue 来实现动画效果是必须要掌握的，如果项目中没有用到动画，只需要了解即可。本章介绍的都是比较基础的知识，当然其中有一些相对来说比较复杂的内容，例如交错过渡、排序过渡、动态过渡等，这些在项目中应用得比较少，这里就不做过多讲解了，有兴趣的读者可以查阅 Vue 官网的动画部分自行学习。

下面来检验一下读者对本章内容的掌握程度：

  • 如何实现一个按钮的 “渐隐渐现” 效果？

  • transition 组件有哪些钩子函数？

  • v-enter-from 和 v-enter-to 的出现时机是什么？