javascript - React.js：将元素平滑地移动到新位置

Question

我需要将一个元素从一个位置平滑地移动到另一个位置，只要它呈现在其他地方。这是我的简化示例：

import React, { useState } from 'react';

const SomeComponent = () => {
    const [isYes, setIsYes] = useState(true);

    return (
        <div>
            <div>Yes{isYes && <i>*</i>}</div>
            <div>No{!isYes && <i>*</i>}</div>
            <button onClick={() => setIsYes(!isYes)}>Toggle</button>
        </div>
    );
};

export default SomeComponent;

Yes*每当单击按钮时，星号会在和之间切换No*。我需要这个星号以动画方式平稳移动。我尝试了useRef()结合 with 的技巧getBoundingClientRect()，但最终出现了错误行为或无限渲染。

应该如何正确完成？或者，在像我这样的情况下，是否有一个库可以为元素设置动画？

标签： javascriptreactjscss-animationsjsx