重新渲染时样式化的组件不应用过渡效果？

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

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