vue2 css扩散效果

### 使用 Vue2 和 CSS 实现扩散效果

为了在 Vue2 中创建一个具有视觉吸引力的扩散效果，可以通过组合 Vue 的动态绑定特性和 CSS 动画属性来完成。下面是一个具体的例子，展示了如何利用这些技术制作一个点击按钮时触发的圆形波纹扩散动画。

#### HTML 结构
首先定义基本的HTML结构，在`<template>`标签内部编写如下代码：

<div id="app">
  <button @click="createRipple($event)">Click Me</button>
</div>

这里使用了Vue事件处理器 `@click` 来监听用户的点击行为并调用相应方法。

#### JavaScript 部分 (Vue 组件逻辑)
接着设置Vue实例内的JavaScript部分，负责处理交互逻辑以及计算样式参数:

new Vue({
  el: '#app',
  methods: {
    createRipple(event){
      const button = event.target;
      let ripple = document.createElement('span');
      ripple.classList.add('ripple');

      // 获取鼠标相对于按钮的位置
      const rect = button.getBoundingClientRect();
      const posX = event.clientX - rect.left;
      const posY = event.clientY - rect.top;

      // 设置初始状态下的定位和大小
      Object.assign(ripple.style,{
        top:`${posY}px`,
        left:`${posX}px`,
        width:'0px',
        height:'0px'
      });

      // 添加到DOM树中
      button.appendChild(ripple);

      setTimeout(() => {
          ripple.remove(); // 移除已经播放完毕的涟漪元素
      },800);
      
      requestAnimationFrame(()=>{
         // 开始扩展动画
         ripple.style.width=`${Math.max(button.offsetWidth,button.offsetHeight)}px`;
         ripple.style.height=ripple.style.width;
      });
    }
  }
});

这段脚本实现了当用户单击按钮时，在点击处生成一个新的 `<span>` 元素作为水波动画的基础，并通过改变其尺寸模拟向外扩张的过程[^1]。

#### 样式设计（CSS）
最后一步是为上述操作提供必要的外观修饰，即定义`.ripple`类的相关样式规则：

button{
  position:relative;
  overflow:hidden; /* 确保超出范围的内容被裁剪 */
}

.ripple{
  content:"";
  display:block;
  position:absolute;
  pointer-events:none;/* 不响应指针事件 */

  background-color:#fff;
  transform:translate(-50%,-50%);
  opacity:.5;
  
  transition-property:width,height,opacity;
  transition-duration:.6s,.6s,.3s;
}

此段CSS设置了基础样式的配置，包括但不限于颜色、透明度变化的时间曲线等，从而让每次产生的涟漪看起来更加自然流畅。