React按钮组件悬停动画中途取消时文字消失问题求助

问题描述 #

开发的React按钮组件在正常悬停时文字动画表现正常，但快速取消悬停或动画中途取消时，按钮文字会完全消失。

问题原因 #

当前CSS动画的实现方式是在悬停时同时修改.perspectiveText的旋转角度和两个<p>标签的位移、透明度，但当悬停状态快速中断时，这些过渡属性会停留在中间状态：第一个<p>的透明度接近0且已向上偏移，第二个<p>的透明度还未完全恢复，再加上.perspectiveText的旋转角度未复位，最终导致所有文字都不可见。

解决方案 #

通过优化CSS的3D变换逻辑，将文字的显示/隐藏与.perspectiveText的旋转绑定，利用3D空间的特性替代独立的透明度和位移控制，确保悬停状态中断时，所有属性能平滑复位到初始状态。

修改后的样式代码（styles.module.scss） #

.button {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 100px;
  height: 40px;
  cursor: pointer;
  border-radius: 25px;
  overflow: hidden;

  .slider {
    position: relative;
    width: 100%;
    height: 100%;

    .el {
      width: 100%;
      height: 100%;
      background-color: #c9fd74;
      display: flex;
      align-items: center;
      justify-content: center;
      p {
        margin: 0px;
      }
      &:nth-of-type(2) {
        background-color: black;
        p {
          color: #c9fd74;
        }
      }
      &:hover .perspectiveText {
        transform: rotateX(90deg);
      }
    }
  }
}

.perspectiveText {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1);
  
  p {
    margin: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
    text-align: center;
    backface-visibility: hidden;
    transform-origin: bottom center;
  }

  p:first-child {
    transform: rotateX(0deg);
  }

  p:last-child {
    transform: rotateX(-90deg) translateY(100%);
  }
}

代码说明 #

1. 移除了hover状态下对<p>标签独立的透明度和位移控制，改为仅通过.perspectiveText的旋转角度来切换两个文字的可见性。
2. 为<p>标签添加backface-visibility: hidden，避免3D旋转时显示反向的文字。
3. 统一了动画触发逻辑，让所有过渡都绑定到.perspectiveText的旋转，确保状态中断时能同步复位。

这样修改后，无论何时取消悬停，动画都会平滑过渡回初始状态，不会出现文字消失的问题。

内容的提问来源于stack exchange，提问作者Taste of Leaving