javascript - 样式组件在重新渲染时不应用过渡效果？

Question

我正在使用 styled-components 来为我的组件设置动态样式，但我似乎无法让它按照我想要的方式工作。

我正在尝试在以编程方式动态聚焦的按钮上添加ease-in-out效果。

正如您所看到的，样式已应用，但是 transition 属性没有任何效果。有没有办法实现这个目标？

正如信息说明，组件(按钮)每 3 秒重新渲染一次以进行切换，这可能是原因吗？如果是这样，如何解决这个问题？

组件

class LanguageButton extends PureComponent {
    render() {
        const { children, theme, isFocussed, ...otherProps } = this.props;

        const Button = styled.div`
            border: 1px solid ${theme};
            margin-top: 10px;
            margin-bottom: 10px;
            background-color: transparent;
            text-align: center;
            padding-top: 25px;
            padding-bottom: 25px;
            min-height: 0;
            transition: all 0.1s ease-in-out;

            :hover {
                background-color: ${theme};
                transition: all 0.1s ease-in-out;
            }
            :active {
                background-color: ${theme};
            }

            &.isFocussed {
                transition: all 0.1s ease-in-out;
                background-color: #ebebeb;

                :hover {
                    background-color: ${theme};
                    transition: all 0.1s ease-in-out;
                }
                :active {
                    background-color: ${theme};
                }
            }
        `;

        return (
            <Button
                className={classnames("BUTTON BUTTON--50 GM--noselect", { isFocussed })}
                {...otherProps}
            >
                {children}
            </Button>
        );
    }
}

Answer 1

乍一看，根据此代码片段，我假设您正在添加/删除此“isFocused”类，这就是问题的根源。对于过渡，您希望避免添加/删除类本身，因为这样过渡就无法正确呈现，因为它一开始就不存在。