vue 动画 雪花下落 消失 再显示 代码

你好，以下是使用Vue实现雪花下落、消失、再显示的动画代码示例：

<template>
  <div class="snow-container">
    <div class="snow" v-for="(item, index) in snowList" :key="index" :style="item.style"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      snowList: []
    }
  },
  mounted() {
    this.createSnow();
  },
  methods: {
    createSnow() {
      let width = window.innerWidth;
      let height = window.innerHeight;
      for (let i = 0; i < 30; i++) {
        let snow = {
        x: Math.random() * width,
        y: Math.random() * height,
        size: Math.random() * 50 + 10,
        opacity: Math.random(),
        animationDelay: Math.random() * 10,
        style: {}
      }
      snow.style = {
        transition: 'all 1s ease-out '+snow.animationDelay+'s, visibility 0s linear 1s',
        visibility: 'hidden',
        position: 'fixed',
        top: snow.y + 'px',
        left: snow.x + 'px',
        width: snow.size + 'px',
        height: snow.size + 'px',
        opacity: snow.opacity,
        backgroundColor: 'white',
        borderRadius: '50%',
        zIndex: '999'
      };
      this.snowList.push(snow);
      }
    },
    startSnow() {
      this.snowList.forEach(item => {
        item.style.transition = 'all 1s ease-out, visibility 0s linear';
        item.style.visibility = 'visible';
        item.style.top = window.innerHeight + 'px';
        item.style.transform = `translate(-${item.x}px, -${window.innerHeight + item.size}px) rotate(${Math.random() * 360}deg)`;
      });
      setTimeout(() => {
        this.resetSnow();
      }, 2000);
    },
    resetSnow() {
      this.snowList.forEach(item => {
        item.style.transition = 'none';
        item.style.visibility = 'hidden';
        item.style.top = item.y + 'px';
        item.style.transform = `translate(0px, 0px) rotate(0deg)`;
      });
      setTimeout(() => {
        this.startSnow();
      }, 2000);
    }
  },
  created() {
    this.startSnow();
  }
}
</script>

<style>
.snow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.snow {
  position: fixed;
  visibility:hidden;
}
</style>

请注意，上述代码仅为演示用途，您需要根据具体的项目或场景进行调整和优化。