本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！
转载请注明出处，未经同意，不可修改文章内容。
🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕，有需要的小伙伴可按需前往查看。
🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。
打开编辑器，准备一份基础 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>
❓为什么不直接用 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>
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！
