Vue implements list animation

What if the product manager asks us to implement a gradient animation of a list?

Use the transition-group tag in Vue for the animation

        
        
       //tag indicates that the generated element name is an identification of the class 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>
      
      
      // Add and remove elements
      methods: {
          add() {
            const item = { name: this.name, id: Math.random() };
            this.list.unshift(item);
          },
          deletes(id) {
            this.list = this.list.filter((e) = > {
              returne.id ! == id; }); }},// Add and remove transition effects with CSS. I selected the change of transparency of transition effects, of course, I can select more and go to the change
          .list-enter-active,
          .list-leave-active {
            transition: opacity 0.5s ease;
          }
          .list-enter,
          .list-leave-to {
            opacity: 0;
          }
      
Copy the code