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

您好！您的问题是关于 Vue 动画实现枫叶下落消失再显示的代码。以下是一个简单的代码示例：

<template>
  <div>
    <transition name="fade">
      <div v-show="isVisible" class="leaf-container">
        <div class="leaf"></div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    hideLeaf() {
      this.isVisible = false;
    },
    showLeaf() {
      this.isVisible = true;
    }
  },
  mounted() {
    let leaf = document.querySelector(".leaf");
    leaf.classList.add("rotate"); // 初始化时，让枫叶旋转

    setTimeout(() => {
      leaf.classList.remove("rotate");
    }, 1000); // 移除旋转类名，停止旋转

    setTimeout(() => {
      this.hideLeaf();
    }, 2000); // 2s后隐藏枫叶

    setTimeout(() => {
      this.showLeaf();
    }, 5000); // 5s后显示枫叶
  }
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease; // 过渡时间0.5秒
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
} // 给初始与结束状态添加不透明度为0的样式

.leaf-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.leaf {
  position: absolute;
  width: 50px;
  height: 50px;
  background-image: url(leaf.png);
  background-size: contain;
}

.rotate {
  animation: rotate 2s infinite linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

在这个代码示例中，我们使用了 Vue 的过渡效果和动画效果来实现枫叶动画效果。具体的实现细节请看代码中的注释。希望这个代码示例能够对您有所帮助，如有问题请随时问我！