单击“ VUE 3中的过渡组”之后显示hide div

Question

显示新元素后

在单击旧元素隐藏使用动画之后，我需要使用动画模板

<div id="app">
 
  
      <transition-group name="list">
        <div style="cursor:pointer" v-for="(item,key,i) in array" :key="i" class="list-item" >
          <div @click="select(key)">{{key}}</div>
        </div>
      </transition-group>
   
  <div>
   {{element}}
  </div>
</div>

：脚本

export default {
  name: 'App',
 data() {
    return {
    element:"hello",
    array: ["hello","hello1","hello2"],
    }
  
  },
   methods:{
     select(key){
       this.element = this.array[key]
     }
   },
  components: {
    HelloWorld
  }
}

：

.list-item {
  transition: all 1s;
}
.list-leave-active {
  display: none;
}
.list-enter {
  opacity: 0;
}

https://stackblitz.com/edit/vue-tr9ucq?file=src/app.vue

Answer 1

请参阅此snippet 受VUE官方doc https://v.vuejs.org/v2/guide/guide/transitions.html

更新列表（添加/删除项目）以触发Vue Transition的逻辑。

 <transition-group name="list" tag="div" class="list">
        <span
          v-for="(item, index) in array"
          v-bind:key="item"
          @click="remove(index)"
          class="list-item"
        >
          {{ item }}
        </span>
      </transition-group>

通过点击事件将索引传递，然后执行逻辑以更新您的数组

methods: {
    remove(index) {
      this.removed.push(this.array[index]);
      this.array.splice(index, 1);
    },
  },