添加active类后无法触发Ripple Effect过渡效果，寻求技术帮助

问题出在浏览器的样式合并渲染机制上：你连续同步添加point和active类，浏览器会把这两次样式修改合并成一次重绘，根本不会识别到point类对应的初始状态，自然触发不了过渡动画。

解决办法：给浏览器留足渲染初始状态的时间 #

用requestAnimationFrame延迟添加active类，让浏览器先完成point类的样式计算和渲染，再触发过渡。

修改后的JS代码示例：

// 创建涟漪元素
const newClick = document.createElement('span');
// 添加初始样式类
newClick.classList.add('point');
// 设置点击位置（基于按钮的相对坐标）
const rect = button.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
newClick.style.left = `${x}px`;
newClick.style.top = `${y}px`;
// 先把元素插入DOM
button.appendChild(newClick);
// 等浏览器完成初始渲染后，再添加激活类
requestAnimationFrame(() => {
  newClick.classList.add('active');
});

还要检查CSS是否正确配置 #

确保point类有初始状态，active类有目标状态，且设置了过渡属性：

/* 按钮要设为相对定位，让涟漪基于按钮定位 */
.button {
  position: relative;
  overflow: hidden; /* 隐藏超出按钮的涟漪部分 */
}

.point {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  width: 0;
  height: 0;
  transform: scale(0);
  opacity: 1;
  pointer-events: none; /* 避免涟漪干扰后续点击 */
  /* 必须设置过渡属性，指定要过渡的样式和时长 */
  transition: all 0.6s ease-out;
}

.point.active {
  width: 200px;
  height: 200px;
  transform: scale(1);
  opacity: 0;
}

补充说明 #

如果用setTimeout(() => { ... }, 0)也能解决，但requestAnimationFrame更贴合浏览器的渲染周期，效果更稳定。另外要注意：

• 按钮必须设置position: relative，否则涟漪会基于页面定位，位置错乱
• 给按钮加overflow: hidden，避免涟漪超出按钮范围显示

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