简单学会使用Vue2中的列表过渡和状态过渡效果

作者：张浔

阅读本篇文章大概耗时3分钟

前言

小伙伴们好啊，我是张浔。

首先感谢来阅读我的文章，今天呢，给大家聊一聊列表过渡和状态过渡，看文字好像理解了又不是很理解，到底是什么意思呢？别急，我慢慢介绍给你认识。

如果你是对 Vue2 一点都不懂的，建议先阅读完我前两篇文章 《教你用Vue2如何做过渡&动画效果+著名动画库》、《学一学在Vue2中实现过渡&动画的初始渲染和多个元素and组件过渡的效果》之后再来看此篇，不然你会很懵。

列表过渡

1. 介绍

大家对列表应该都熟悉吧，我举个例子，有三位好朋友，分别是小明、小红、小刘，他们三个经常在一起玩，组在了一起，这就是一个列表，可能还会有新的朋友加入他们一起玩，也可能哪一天就不跟其中的一个朋友不玩了， 术语中表达就是一个列表中可以有很多元素，可以进行添加也可以进行删除。

既然理解什么是列表了，那么怎么给他们加过渡效果呢？

看看 Vue2—列表过渡 官网中是怎么说的

之前我们给元素加过渡动画时，都是放在了 transition 组件中，这次发现不一样了，官网中介绍告诉我们使用 transition-group 组件，还有如下特点：

• 它默认会以一个 span 元素显示在 DOM 中，可以通过 tag 属性更换为其他元素，比如：div 、p ….等等
• 它不可以使用 过渡模式 了，就是咱们前面文章介绍的 mode 属性中的 in-out 和 out-in ，详情请阅读 《学一学在Vue2中实现过渡&动画的初始渲染和多个元素and组件过渡的效果》
• 在 transition-group 组件里面的元素必须有唯一的 key 属性值
• 我们自己定义的 CSS 过渡效果的类会应用在里面的元素，不会应用在 transition-group 组件上

我是按我自己理解的意思介绍的它的特点，我个人觉得这样表达自己更容易理解一些，小伙伴一定可以看懂的对吧

介绍完特点，其实发现一个小问题，它说 transition-group 组件默认会以一个 span 元素显示在 DOM 中，之前使用的 transition 组件没有显示吗？？？ 自己并没有注意这个细节，我去试一试，截图给你们啊。

代码

<template>
  <div class="TransitionsView">
    <!-- 过渡&动画组件 -->
    <transition>
      <button v-if="isShow" @click="isShow = !isShow" key="open">开启</button>
      <button v-else @click="isShow = !isShow" key="close">关闭</button>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'TransitionsView',
  data () {
    return {
      // 控制盒子显示与隐藏，false为隐藏，true为显示, 默认隐藏
      isShow: true
    }
  }
}
</script>

<style lang="less" scoped>
// 进入(显示)开始时效果
.v-enter {
  opacity: 0;
  transform: translateX(50px);
}

// 离开(隐藏)结束时效果
.v-leave-to {
  opacity: 0;
  transform: translateX(-50px);
}

// 进入(显示)和离开(隐藏)过程中效果
.v-enter-active,
.v-leave-active {
  transition: all 1s;
}

// 按钮样式
button {
  position: absolute;
  width: 50px;
  margin: 0px -25px;
}
</style>

效果

发现 transition 组件确实没有元素显示，直接是显示的里面的 button 元素，之前一直没有注意到这个小细节，这次记住它了！

我没有放这段代码的动图演示效果，因为此我前面的文章中有过动图了，就是一个滑动过渡的效果，就不过多演示了。

2. 案例

那么我们来写一个小案例来增加小伙伴对于 transition-group 组件的认识吧

要写一个什么案例呢？其实官网中有示例，给你们看看

感觉介绍这个小案例是最容易理解的了，咱们就模仿着写一个吧，不过我们的内容可以变化一下，数字太生硬了，嘿嘿，我给你们带来一个西游篇。

代码