vue 写一个水波纹循环动画

可以使用 Vue.js 的 transition 和 animation 功能来实现水波纹循环动画。以下是一个简单的示例代码：

<template>
  <div class="ripple-container" @click="startRipple">
    <div v-for="(ripple, index) in ripples" :key="index" class="ripple" :style="ripple.style"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ripples: [],
      nextKey: 0,
    };
  },
  methods: {
    startRipple(event) {
      const rect = event.target.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;
      const size = Math.max(rect.width, rect.height);
      const duration = 1000;

      this.ripples.push({
        key: this.nextKey++,
        style: {
          left: `${x}px`,
          top: `${y}px`,
          width: 0,
          height: 0,
          opacity: 0.5,
          transition: `all ${duration}ms ease-out`,
        },
      });

      setTimeout(() => {
        this.ripples.shift();
      }, duration);
    },
  },
};
</script>

<style scoped>
.ripple-container {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
}
</style>

在这个示例中，我们创建了一个包含水波纹效果的容器，当用户点击容器时，我们会在容器中添加一个水波纹元素，并在一定时间后将其删除。通过不断添加和删除水波纹元素，我们就可以实现水波纹循环动画的效果。