（27）Vue 中的动画特效——⑥ Vue 中的列表过渡 | Vue 基础理论实操

站长

2023年07月08日 19:21 · 阅读数 11

本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！

转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕，有需要的小伙伴可按需前往查看。

🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。

打开编辑器，准备一份基础 Vue 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>前端一万小时-Vue 中的列表过渡</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root"></div>

  <script>
    var vm = new Vue({
      el: "#root"
    })
  </script>
</body>
</html>

1 实现一个简单的功能

❗️需求：

有一个列表项，列表显示一个数组中的内容；
点击按钮可向列表内增加数据，同时页面显示新内容。

实现代码和效果：

<body>
  <div id="root">
    <div v-for="item of list" :key="item.id"> <!-- 1️⃣添加一个 div 标签，并循环 list 数组；
        																			1️⃣-①：列表每一项以 item 的 id 为 key 值；
																							-->
    																					 
      {{item.title}} <!-- 1️⃣-②：列表每一项显示的内容为 item 的 title； -->
    </div>


    <!-- 3️⃣添加一个“Add”按钮，并绑定 handleBtnClick 事件； -->
    <button @click="handleBtnClick">Add</button>
  </div>

  <script>

    // 4️⃣-②：定义一个“计数器” count，默认值为 0；
    var count = 0;

    var vm = new Vue({
      el: "#root",
      data: {

        // 2️⃣在 data 中定义 list， 默认为空；
        list: []
      },

      // 4️⃣在 methods 中定义 handleBtnClick 方法：
      methods: {
        handleBtnClick: function() {

          // 4️⃣-①：每次点击 Add 向 list 里新增一个内容；
          this.list.push({

            id: count++,  // 4️⃣-③：每个新增的内容 id 为 count++；
            title: "Hello，前端一万小时"  // 4️⃣-④：每个内容都有一个 title。
          })
        }
      }
    })
  </script>
</body>

（27）Vue 中的动画特效——⑥ Vue 中的列表过渡 | Vue 基础理论实操

❓为什么不直接用 index 作为 key 值？

答：不建议用 index 作为 key 值是因为在这种情况下，它会引发一些问题。

一是导致性能上的下降，二是会对整个功能产生一些影响。而在我们的代码中，每一项内容的 id 就是一个独立的编号，所以更不需要用 index 作为 key 值。

所以只需要记住一点，如果能不用 index 作为 key 值，尽量不要用 index 作为 key 值。

2 实现列表的过渡动画

❓如何给列表添加过渡效果？ 如，给列表中新增内容时，有过渡动画效果？

答：这需要用到一个新的标签 transition-group 。

transition-group 与使用 transition 标签使用方法一样：

<head>
  <meta charset="UTF-8">
  <title>前端一万小时-Vue 中的列表过渡</title>
  <script src="./vue.js"></script>

  <style> /* 2️⃣添加动画样式。 */
  .v-enter {
    opacity: 0;
  }

  .v-enter-active {
    transition: opacity 1s;
  }
</style>

</head>
<body>
  <div id="root">

    <transition-group> <!-- 1️⃣使用 transition-group 标签包裹列表； -->
      <div v-for="item of list" :key="item.id">
        {{item.title}}
      </div>
    </transition-group>

    <button @click="handleBtnClick">Add</button>
  </div>

  <script>
    var count = 0;

    var vm = new Vue({
      el: "#root",
      data: {
        list: []
      },
      methods: {
        handleBtnClick: function() {
          this.list.push({
            id: count++,
            title: "Hello，前端一万小时"
          })
        }
      }
    })
  </script>
</body>

（27）Vue 中的动画特效——⑥ Vue 中的列表过渡 | Vue 基础理论实操

3 列表过渡动画的原理

❓列表过渡动画的原理是什么？

答：

1️⃣可以这样来理解，这个 div 的列表，在循环之后会变成多个 div，里面分别有一条内容：

<div v-for="item of list" :key="item.id">
  {{item.title}}
</div>

<!-- ❗️循环后会变成多个 div，里面分别有一条内容。 -->
<div>Hello，前端一万小时</div>
<div>Hello，前端一万小时</div>
<div>Hello，前端一万小时</div>

2️⃣当在一个循环的列表外层加一个 transition-group ，相当于对列表中的每一项外部都加了一个 transition（即把列表的过渡转化为单个元素的过渡了）；

// 2️⃣-①：当我们在列表的外层加一个 transition-group；
<transition-group>
  <div v-for="item of list" :key="item.id">
    {{item.title}}
  </div>
</transition-group>

// 2️⃣-②：相当于在每一个 div 标签外层都加了一个 transition。
<transition>
  <div>Hello，前端一万小时</div>
</transition>
<transition>
  <div>Hello，前端一万小时</div>
</transition>
<transition>
  <div>Hello，前端一万小时</div>
</transition>

3️⃣每个单个元素的过渡，Vue 会在元素隐藏/显示的时候，动态的找到时间点去增加对应的类名。而当在 CSS 中写了 v-enter、 v-leave-to 这些类名所对应的 CSS 样式后，每一个列表项就有了自己的过渡动画。

祝好，qdywxs ♥ you！