💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
[TOC] >[success] # 列表动画 本章讲解像 **列表** 这样的 **多元素** 如何写 **动画效果** ,下面的代码中每次 **点击按钮向数组前方添加一个数字,能看到了添加的数字从下到上的一个动画效果** 代码如下: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表动画</title> <style> .lsit-item{ display: inline-block; margin-right: 10px; } /* -------------------入场动画----------------------- */ .v-enter-from{ opacity: 0; transform: translateY(30px); } .v-enter-active{ transition: all .5s ease-in; } .v-enter-to { opacity: 1; transform: translateY(0); } </style> <!-- 通过cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 列表动画的实现 const app = Vue.createApp({ data(){ return { list: [1, 2, 3] } }, methods: { handleClick(){ this.list.unshift(this.list.length + 1) } }, template: ` <div> <transition-group> <span class="lsit-item" v-for="item in list" :key="item">{{item}}</span> </transition-group> <button @click="handleClick">增加</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ 但是这还是有一点点小瑕疵, **只有加进去的数字有动画效果** ,在这之前 **每次添加数字时,右侧的数字只会很生硬的想有挤过去** ,如果想让 **列表其他元素挤到右侧时候也有动画** 该怎么办呢,使用 **.v-move** 来解决此问题,代码如下: ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表动画</title> <style> .lsit-item{ display: inline-block; margin-right: 10px; } /* -------------------入场动画----------------------- */ .v-enter-from{ opacity: 0; transform: translateY(30px); } .v-enter-active{ transition: all .5s ease-in; } .v-enter-to { opacity: 1; transform: translateY(0); } /* 其他列表移动时候可以.v-move做一些描述 */ .v-move{ transition: all .5s ease-in; } </style> <!-- 通过cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 列表动画的实现 const app = Vue.createApp({ data(){ return { list: [1, 2, 3] } }, methods: { handleClick(){ this.list.unshift(this.list.length + 1) } }, template: ` <div> <transition-group> <span class="lsit-item" v-for="item in list" :key="item">{{item}}</span> </transition-group> <button @click="handleClick">增加</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~