vue 写一个水波纹循环动画

好的，下面是一个简单的 Vue 水波纹循环动画实现：

1. 首先，我们需要在 Vue 的 `template` 中添加一个 `div` 元素，作为容器来显示水波纹动画：

<template>
  <div class="ripple-container">
    <div class="ripple"></div>
  </div>
</template>

2. 然后，在 `style` 标签中添加样式，使容器和水波纹的位置、大小、颜色等属性符合我们的需求：

<style>
  .ripple-container {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #ccc;
  }
  
  .ripple {
    position: absolute;
    width: 0;
    height: 0;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    opacity: 0.7;
    animation: ripple 2s linear infinite;
  }
  
  @keyframes ripple {
    from {
      width: 0;
      height: 0;
      opacity: 0.7;
    }
    to {
      width: 400px;
      height: 400px;
      opacity: 0;
    }
  }
</style>

3. 最后，在 Vue 的 `script` 中添加逻辑代码，使水波纹动画循环播放：

<script>
  export default {
    name: 'RippleAnimation',
    created() {
      setInterval(() => {
        const ripple = document.querySelector('.ripple');
        ripple.classList.remove('ripple');
        void ripple.offsetWidth;
        ripple.classList.add('ripple');
      }, 2000);
    },
  };
</script>

以上就是一个简单的 Vue 水波纹循环动画实现。需要注意的是，为了实现动画循环播放，我们在 `created()` 生命周期中使用 `setInterval()` 定时器来不断地重复添加、移除类名，以触发动画效果。