vue 动画 枫叶下落 消失 再显示 代码

好的，以下是Vue动画实现枫叶下落消失再显示的代码：

<template>
  <div class="root">
    <transition-group name="maple-fall">
      <img v-for="(item, index) in maples" :key="index" :src="item.src" class="maple" @click="removeMaple(index)">
    </transition-group>
  </div>
</template>

<style>
  .maple-fall-enter-active,
  .maple-fall-leave-active {
    transition: all 0.5s ease;
    position: absolute;
  }
  .maple-fall-enter {
    opacity: 0;
    transform: translateY(-100%);
  }
  .maple-fall-leave-to {
    opacity: 0;
    transform: translateY(100%);
  }
  .maple {
    position: absolute;
    width: 50px;
    height: 50px;
  }
</style>

<script>
export default {
  data() {
    return {
      maples: [
        { src: 'maple1.png' },
        { src: 'maple2.png' },
        { src: 'maple3.png' }
      ]
    }
  },
  methods: {
    removeMaple(index) {
      this.maples.splice(index, 1)
    },
    addMaple() {
      const newMaple = { src: 'maple1.png' }
      this.maples.push(newMaple)
    }
  }
}
</script>

上面的代码中，使用了Vue的过渡动画transition-group，并给它添加了name属性，然后根据name属性定义了进入和离开动画的样式。另外，还用了Vue的双向数据绑定方式将maples数组与页面中的图片绑定，当maples数组中的元素被删除时，对应的图片也会被删除，反之当添加元素时，页面中也会增加对应的图片。