Zoom缩放动画在React中如何实现平滑过渡？

小静怡提问于 2026-03-07 15:42:20 阅读 5

组件

我用React写了个简单的缩放动画，但元素放大时会突然跳变，没有平滑过渡，试了加transition也没用，是哪里写错了吗？

const ZoomBox = () => {
  const [isZoomed, setIsZoomed] = useState(false);
  return (
    <div
      onClick={() => setIsZoomed(!isZoomed)}
      style={{
        width: '100px',
        height: '100px',
        backgroundColor: 'blue',
        transform: isZoomed ? 'scale(1.5)' : 'scale(1)',
        transition: 'transform 0.3s ease'
      }}
    />
  );
};

我来解答赞 2 收藏

反馈

1 条解答

❤祖硕 Lv1

啊哈，这个问题我遇到过。不是React的问题，而是CSS transform和transition的配合问题。你代码其实没写错，但少了点细节。

关键点在于要确保transform的初始值明确。有时候浏览器会搞不清楚从什么状态开始过渡。试试这样改：

const ZoomBox = () => {

  const [isZoomed, setIsZoomed] = useState(false);

  return (

    
      onClick={() => setIsZoomed(!isZoomed)}

      style={{

        width: '100px',

        height: '100px',

        backgroundColor: 'blue',

        transform: 'scale(1)', // 这里确保初始值

        transition: 'transform 0.3s ease',

        transform: isZoomed ? 'scale(1.5)' : 'scale(1)'

      }}

    />

  );

};

另外还有个更稳的做法，用CSS类代替内联样式，这样浏览器更容易处理过渡：

const ZoomBox = () => {

  const [isZoomed, setIsZoomed] = useState(false);

  return (

    
      onClick={() => setIsZoomed(!isZoomed)}

      className={isZoomed ? 'zoomed' : 'normal'}

      style={{

        width: '100px',

        height: '100px',

        backgroundColor: 'blue'

      }}

    />

  );

};

然后CSS部分：

.normal {

  transform: scale(1);

  transition: transform 0.3s ease;

}

.zoomed {

  transform: scale(1.5);

}

这两种方法都能解决突然跳变的问题。第一种简单直接，第二种更规范些。

2026-03-07 16:05