如何正确实现元素平滑缩放到0后恢复原尺寸，解决React中setTimeout方案不可靠问题

首先你的原方案里setTimeout回调看起来不执行，大概率是两种情况：一是调用动画后200ms内组件卸载，此时inner_ref.current已经为null，你加的判断逻辑跳过了赋值；二是页面切后台时浏览器会延迟低优先级的setTimeout执行，导致时机不准。以下是更可靠的实现方案：

方案1：CSS Transition + transitionend事件（最推荐） #

完全避免手动计时，由浏览器原生动画事件触发状态变更，时序完全准确。
首先给元素加过渡样式：

.target-box {
  /* 缩放动画时长和缓动可自行调整 */
  transition: transform 0.2s ease;
}

React组件代码：

import { useState, useRef } from 'react';

const YourComponent = () => {
  const [isScalingDown, setIsScalingDown] = useState(false);
  const inner_ref = useRef(null);

  // 过渡结束触发回调
  const handleTransitionEnd = () => {
    // 只有缩到0的动画结束时才触发恢复
    if (isScalingDown) {
      setIsScalingDown(false);
    }
  };

  const animate_boxes = () => {
    setIsScalingDown(true);
  };

  return (
    <div
      ref={inner_ref}
      className="target-box"
      style={{ transform: isScalingDown ? 'scale(0)' : 'scale(1)' }}
      onTransitionEnd={handleTransitionEnd}
    >
      {/* 你的内容 */}
    </div>
  );
};

方案2：Web Animations API 直接控制动画 #

不需要额外写CSS，直接通过JS调用浏览器原生动画接口，自动处理关键帧时序：

const animate_boxes = () => {
  if (!inner_ref.current) return;
  inner_ref.current.animate(
    [
      { transform: 'scale(1)' }, // 起始状态
      { transform: 'scale(0)' }, // 200ms时缩到0
      { transform: 'scale(1)' }  // 400ms时恢复原始尺寸
    ],
    {
      duration: 400, // 总动画时长，对应缩放+恢复各200ms
      easing: 'ease',
      fill: 'forwards'
    }
  );
};

方案3：优化原setTimeout方案（仅兼容旧场景用） #

如果一定要用原来的写法，可以加清理定时器的逻辑，避免组件卸载后的无效执行，同时减少多次调用产生的冲突：

import { useRef, useEffect } from 'react';

const YourComponent = () => {
  const inner_ref = useRef(null);
  const timerRef = useRef(null);

  const animate_boxes = () => {
    inner_ref.current.style.transform = "scale(0)";
    // 先清掉之前的定时器，避免多次调用冲突
    if (timerRef.current) clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => {
      if (inner_ref.current) {
        inner_ref.current.style.transform = "scale(1)";
      }
      timerRef.current = null;
    }, 200);
  };

  // 组件卸载时清定时器，避免内存泄漏和无效执行
  useEffect(() => {
    return () => {
      if (timerRef.current) clearTimeout(timerRef.current);
    };
  }, []);

  // 其余业务逻辑
};

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture