React中按钮hover时margin-left:50%动画失效的解决方法

最省心的方案：纯CSS实现 #

直接用CSS伪类+过渡动画，不需要JS控制，浏览器原生支持，性能最优：

/* 全局样式或CSS模块中 */
.hover-slide-btn {
  /* 定义过渡动画的属性、时长和缓动效果，可根据需求调整 */
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-slide-btn:hover {
  margin-left: 50%;
}

React组件里直接使用这个类：

<button className="hover-slide-btn">Hover 试试</button>

用JS控制状态的方案（适合有额外逻辑的场景） #

如果需要结合其他业务逻辑，比如根据状态决定是否允许动画，可以通过React的state跟踪hover状态：

import { useState } from 'react';

function HoverButton() {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <button
      style={{
        transition: 'margin-left 0.3s ease',
        // 根据hover状态动态设置margin-left
        marginLeft: isHovered ? '50%' : '0'
      }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      Hover Me
    </button>
  );
}

修复你原来的关键帧动画方案 #

如果一定要用关键帧动画，之前无效的原因大概率是这两点：

1. 关键帧没有在全局CSS中定义（内联样式无法写@keyframes）
2. 没设置forwards属性，动画结束后会回到初始状态

按下面的方式调整：

首先在全局CSS里定义关键帧：

@keyframes slideToRight {
  from { margin-left: 0; }
  to { margin-left: 50%; }
}

@keyframes slideBack {
  from { margin-left: 50%; }
  to { margin-left: 0; }
}

然后在React组件里控制动画：

import { useState } from 'react';

function AnimatedButton() {
  const [currentAnimation, setCurrentAnimation] = useState('');

  return (
    <button
      style={{
        // 用forwards让动画结束后保持最终状态
        animation: `${currentAnimation} 0.3s forwards`,
      }}
      onMouseEnter={() => setCurrentAnimation('slideToRight')}
      onMouseLeave={() => setCurrentAnimation('slideBack')}
    >
      Hover 触发动画
    </button>
  );
}

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