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

Question

I'm using styled-components for having dynamic styling of my components but I can't seem to get it to work the way I want.

I'm trying to add a ease-in-out effect on buttons which are programmaticaly and dynamically focused.

As you can see the styling is applied however the transition property does not take any effect. Is there a way to achieve this?

Just as an info note, the components (buttons) re-render every 3 seconds to toggle, might that be the cause? If so how to work around this?

Component

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

On first glance based on this code snippet, I'm assuming that you're adding / removing this "isFocused" class, and that is the root of your problem. With transitions, you want to avoid adding / removing the class itself, because then the transition can't properly render because it's not there in the first place.