如何使用Styled-Components触发动画？咨询无需setTimeout的实现方案

当然有替代方案，不用手动设置定时器，而是利用浏览器原生的动画事件或CSS属性来控制状态，既避免了定时器与动画时长不同步的问题，也更贴合前端动画的原生生命周期。

方案1：监听animationend事件自动重置状态 #

通过监听CSS动画结束的原生事件，在动画完成后自动重置组件状态，完全不需要依赖setTimeout。

修改后的代码如下：

import React, { useState } from 'react';
import styled, { keyframes } from 'styled-components';

const growAnimation = keyframes`
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
`;

const StyledButton = styled.button`
  padding: 10px 20px;
  font-size: 16px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  animation: ${props => (props.animate ? `${growAnimation} 1s ease-in-out` : 'none')};
`;

const AnimatedButton = () => {
  const [animate, setAnimate] = useState(false);

  const handleClick = () => {
    // 先重置状态再触发动画，确保重复点击也能重新执行动画
    setAnimate(false);
    requestAnimationFrame(() => setAnimate(true));
  };

  const handleAnimationEnd = () => {
    // 动画结束后自动关闭动画状态
    setAnimate(false);
  };

  return (
    <StyledButton
      animate={animate}
      onClick={handleClick}
      onAnimationEnd={handleAnimationEnd}
    >
      Click me!
    </StyledButton>
  );
};

export default AnimatedButton;

• requestAnimationFrame的作用是确保DOM完成状态更新后再开启动画，解决重复点击时动画不触发的问题
• onAnimationEnd会在CSS动画完全结束时触发，自动把animate设为false

方案2：用animation-play-state控制动画播放 #

另一种思路是始终保留动画定义，通过CSS的animation-play-state属性控制动画的运行/暂停状态，同样无需定时器。

代码示例：

import React, { useState, useRef } from 'react';
import styled, { keyframes } from 'styled-components';

const growAnimation = keyframes`
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
`;

const StyledButton = styled.button`
  padding: 10px 20px;
  font-size: 16px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  animation: ${growAnimation} 1s ease-in-out;
  animation-play-state: ${props => (props.animate ? 'running' : 'paused')};
`;

const AnimatedButton = () => {
  const [animate, setAnimate] = useState(false);
  const buttonRef = useRef(null);

  const handleClick = () => {
    setAnimate(true);
    // 监听动画结束事件，重置播放状态
    const resetPlayState = () => {
      setAnimate(false);
      buttonRef.current.removeEventListener('animationend', resetPlayState);
    };
    buttonRef.current.addEventListener('animationend', resetPlayState);
  };

  return (
    <StyledButton
      ref={buttonRef}
      animate={animate}
      onClick={handleClick}
    >
      Click me!
    </StyledButton>
  );
};

export default AnimatedButton;

• 默认动画处于暂停状态，点击时切换为运行状态
• 动画结束后通过事件监听重置为暂停，保证下次点击能重新触发动画

内容的提问来源于stack exchange，提问作者Diego Cândido