風格化組件在重新渲染時不適用轉換效果？

我使用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> 
     ); 
    } 
}

來源

2017-08-09 NealVDV

基於此代碼段第一眼，我假設你添加/刪除這個「isFocused」級，這是你的問題的根源。使用轉換時，您希望避免添加/刪除類本身，因爲轉換無法正確呈現，因爲它不在首位。

來源

2017-08-09 15:43:14

謝謝你看看，但我會怎麼做，否則能做到這一點？我真的沒有線索，然後添加/刪除一個類：/ – NealVDV

這取決於你想要完成的。你在改變按鈕懸停時的背景顏色，懸浮在「isFocused」類等等。你有太多的衝突發生，這意味着你的代碼只是在它彈出的時候應用'isFocused'類的樣式另一個需要注意的是，你不需要在任何地方添加'transition'類。只需將'transition'部分放在根元素上，就像按鈕本身一樣。只要嘗試在沒有'isFocused'的情況下做同樣的代碼，並獲得懸停時的轉換。 –

是的確是因爲我在想這可以解決問題。但懸停工作正常，我認爲這只是因爲反應是重新渲染，所以沒有轉換髮生：/任何想法？（在實現你所說的全部內容之後仍然沒有工作 – NealVDV

風格化組件在重新渲染時不適用轉換效果？

回答

相關問題