如何在Vue.js中复现Material Design的Ripple水波纹点击动画效果

问题原因 #

你的代码存在4个核心问题导致水波纹无法正常展示：

• 父元素.c-btn没有设置position: relative，绝对定位的水波纹元素会相对于页面根节点定位，不在按钮可视区域内
• 父元素没有设置overflow: hidden，水波纹展开后会溢出按钮范围，无法看到正常的圆形扩散效果
• 点击后水波纹状态重置逻辑错误，after-enter回调触发时水波纹刚完成进入动画，立刻设置ripple = false会直接销毁元素，看不到展开过程
• 点击时的状态切换逻辑无法保证每次点击都重新触发enter动画，快速点击时会失效

修复步骤 #

1. 修改CSS样式 #

给.c-btn添加定位和溢出隐藏属性，同时适配不同按钮类型的水波纹颜色：

.c-btn
  position: relative
  overflow: hidden
  // 保留你原来的其他样式不变

// 新增sub按钮的水波纹颜色适配
.c-btn--sub .ripple
  background-color: rgba(darken(#f3eefe, 20%), 0.8)

2. 修改JS逻辑 #

调整点击事件和动画回调的逻辑：

methods: {
  onClick(e) {
    // 替换坐标计算逻辑，避免嵌套元素导致的偏移，比layerX更稳定
    const rect = e.currentTarget.getBoundingClientRect()
    this.x = e.clientX - rect.left
    this.y = e.clientY - rect.top
    // 先重置状态，nextTick后再设为true，保证每次点击都重新触发enter动画
    this.ripple = false;
    this.$nextTick(() => {
      this.ripple = true;
    })
  },
  rippleEnter() {
    this.$refs.ripple.style.top = `${this.y}px`;
    this.$refs.ripple.style.left = `${this.x}px`;
  },
  afterRippleEnter() {
    // 延迟和CSS过渡时间一致的400ms，等水波纹动画完成后再销毁元素
    setTimeout(() => {
      this.ripple = false;
    }, 400)
  },
}

修改完成后即可正常展示Material Design风格的水波纹点击效果。

内容的提问来源于stack exchange，提问作者LovelyAndy