Vue实现列表动画

如果产品经理让我们实现一个列表的渐变动画应该怎么做呢?

使用Vue中的transition-group标签实现动画效果

        
        
       //tag代表生成的元素 name是类名的标识
      <transition-group tag="ul" name="list">
        <li v-for="item in list" :key="item.id" @click="deletes(item.id)">
          {{item.name}}
        </li>
      </transition-group>
      
      
      //添加元素和移除元素
      methods: {
          add() {
            const item = { name: this.name, id: Math.random() };
            this.list.unshift(item);
          },
          deletes(id) {
            this.list = this.list.filter((e) => {
              return e.id !== id;
            });
          },
        },
        
        
        //通过css实现添加和移除的过渡效果 我选择的过渡效果的透明度的变化 ,当然可已选择更多又去的变化
          .list-enter-active,
          .list-leave-active {
            transition: opacity 0.5s ease;
          }
          .list-enter,
          .list-leave-to {
            opacity: 0;
          }