反應CSSTransitionGroup不應用類

我必須缺少的東西。我查閱了各種不同的例子來說明如何做到這一點，但我無法讓我的工作。我只需要將一個元素轉入或轉出。反應CSSTransitionGroup不應用類

我打電話給togglePopup()來翻轉布爾狀態，它正確顯示/隱藏div.popup-msg但過渡類沒有得到應用，很明顯，該元素沒有過渡或過渡。

編輯：我試圖在其自己的組件中移動彈出窗口，認爲問題可能與它在無狀態功能組件內而不是直接在render()中。仍然沒有運氣。

togglePopup =() => { 
    let isPopupVisible = this.state.isPopupVisible; 
    isPopupVisible = !isPopupVisible; 
    this.setState({ isPopupVisible }); 
}; 

render() { 
    const Main =() => { 
    let removePopup = this.state.isPopupVisible 
     ? <div key={1} className="popup-msg">List has Been Removed</div> 
     : null; 

    return (
     <div className="main-wrapper"> 
     <CSSTransitionGroup 
      transitionName="popup" 
      transitionEnterTimeout={700} 
      transitionLeaveTimeout={500}> 
      {removePopup} 
     </CSSTransitionGroup> 
     </div> 
    ) 
    }; 

    return (
     <div className="app-wrapper"> 
     <Route exact path="/" component={Main}/> 
     </div> 
) 

}

SASS：

.popup-enter { 
    transition: opacity 700ms ease-in; 
    opacity: 0.01; 

    &.popup-enter-active { 
    opacity: 1; 
    } 
} 

.popup-leave { 
    transition: opacity 500ms ease-in; 
    opacity: 1; 

    &.popup-leave-active { 
    opacity: 0.01; 
    } 
}

來源

2017-09-02 Andrew Jensen

你正在給'transitionName =「remove-list-popup」'，你的類以'popup'開頭。你需要保持一致。所以如果你的轉換名是'remove-list-popup'，那麼你的類名應該是'remove-list-popup-enter'和'remove-list-popup-leave'等。 –

它們是相同的;爲了可讀性，我在這裏縮短了類名，但忘記在div上改變它。我的錯。我做了編輯。 –

好吧，發現該問題是由於具有彈出是另一個組件的內部。所以我猜想當狀態得到更新時，父組件重新呈現並且沒有顯示過渡效果。不知道爲什麼會發生這種情況，因爲沒有影響父組件的狀態更改。

移動組件外的彈出窗口修復了問題。

來源

2017-09-03 15:13:44

反應CSSTransitionGroup不應用類

回答

相關問題