Web前端vue必做笔记之一：列表动画（vue小技巧）

最新推荐文章于 2025-10-14 16:13:27 发布

原创最新推荐文章于 2025-10-14 16:13:27 发布 · 448 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

这篇博客探讨了在Web前端开发中，如何利用Vue的transition-group组件实现列表动画效果，是Vue.js开发者必学的一项小技巧。

Web前端vue必做笔记之一：列表动画（vue小技巧）

<template>
     <div id="app">
         <!-- list-enter-active  当我们操作列表中元素时，他会给我们加入这样的类名--> 
          <transition-group tag="ul" name="list">
                <li class="item"  @click="deleteItem(item)"  v-for="item in list" :key="item.id">
                    {{item.title}}
                </li>
          </transition-group>

          <br/>
          <button @click="addItem">增加一项</button>
     </div>
</template>

<script>
export default {
     data(){
         return {
               list:[
                 {
                     id:1,
                     title:'项目',
                 },
                                  {
                     id:1,
                     title:'项目',
                 },
                                  {
                     id:1,
                     title:'项目',
                 },
               ]
         }
     },
     methods:{
        //   删除一项
        deleteItem(item){
              const index = this.list.findIndex((i) =>{
                   return i.id === item.id;
              });
              this.list.splice(index, 1);
        },
        // 增加一项
        addItem(){
              const index = Math.random();
              const item = {
                   id:index,
                   title:`项目${index}`,
              };
        }
     }
}
</script>
<style>
   ul{
       padding: 0;
       margin: 0;
       list-style: none;
   }

   item {
         height: 40px;
         border: 1px solid #000;
   }

   .list-enter-active,
   .list-leave-active{
        transition: height 0.1s linear;
   }
    
    /* 进场：height 0 ->40;
    离场：height 40 ->0; */
   .list-enter,
   .list-leave-to {
       height: 0;
   }
</style>

这里主要使用了transition-group 这个组件