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

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”类，这就是你问题的根源。对于转换，您希望避免添加/删除类本身，因为转换无法正确呈现，因为它首先不存在。