スタイルを変更したコンポーネントは、再レンダリング時にトランジションエフェクトを適用しませんか？

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」クラスを削除/追加していることを仮定している、それはあなたの問題の根本です。トランジションを使用すると、トランジションが適切にレンダリングされないため、クラス自体を追加/削除しないようにする必要があります。