在使用顺风时在 reactjs 中附加样式

Question

我想在用户单击按钮时为元素设置动画。 该元素显示按钮被点击的次数。 这是通过在每次单击按钮时递增的状态来管理的。

每当单击按钮时，显示的数字应该反弹/动画，以强调其变化。

本质上，我想有条件地附加一个 CSS 类。 有很多关于如何做到这一点的例子，但几乎所有的例子都只应用了一个类，而不是很多类。

我使用tailwindcss进行样式设置。 这意味着很多元素上有很多 CSS 类。

我考虑过的

字符串连接

有一个classNames数组，可以在其中轻松添加和删除动画类。

const [count, setCount] = useState(0);
const [classNames, setClassNames] = useState([
    'text-2xl', 'mb-2', 'font-bold', 'text-black', 'dark:text-white'
]);

const countElement = <p className={classNames.join(' ')}>{count}</p>;

const handleClick = () => {
    
    setCount(count + 1);
    
    // Append the animation class.
    setClassNames(classNames.concat('animate-bounce'));

    // Remove the animation class after the animation is done.
    setTimeout(() => {
        setClassNames(classNames.filter(className => 
            className !== 'animate-bounce'));
    }, 1000);
};

return <>
    {count > 0 ? countElement : null}
    <button className="px-4 py-3 mb-2 rounded-lg font-semibold transition-colors duration-300
                       bg-cardinal-default hover:bg-cardinal-dark active:bg-cardinal-darkest
                       text-black dark:text-white" 
                       onClick={handleClick}>Click me</button>
</>;

尽管使用 tailwindcss 这有点难看，因为它将所有样式与其实际元素分开。 不完全理想。 感觉非常hacky。

动画一个内部元素

    const [isBouncing, setIsBouncing] = useState(false);

    const countElement = (
        <p className="text-2xl mb-2 font-bold text-black dark:text-white">
            <span className={isBouncing ? 'inline-block animate-spin' : ''}>{count}</span>
        </p>
    );

    ...
    
        setCount(count + 1);
        setIsBouncing(true);

        setTimeout(() => setIsBouncing(false), 1000);
    
    ... 
    

这更好，但它仍然需要我设置inline-block

有没有更好的方法来做到这一点？ 还是我已经用尽了所有有价值的解决方案？

Answer 1

TailwindCSS 是一个实用的 CSS 框架，因此除了将类附加到元素之外，可能没有其他选择。

如果您要使用动画库，例如 Framer Motion，则无需附加 Tailwind 类。 另一方面，您需要自己创建动画，这很容易。

关于您的考虑，第一个选择似乎确实很hacky，而第二个没有并且应该也有效。

尽管如此，由您决定哪种方法最适合您。

Answer 2

您可以使用像styled-components这样的 css-in-js 解决方案，这将使启用/禁用样式变得非常容易。

对于顺风，有一个库可以帮助处理 css-in-js，称为twin

这允许您有条件地启用样式：

const Button = styled.button`
  ${tw`your tailwind styles here`}
  ${props => props.shouldAnimate ? `some animation css here` : "" }
`