React插件CSS轉換組不在onEnter和onLeave上添加類

請我似乎無法得到我在做什麼錯在這裏，我試圖給一個元素設置動畫，但這些類意圖在轉換時添加到元素不要添加，使用開發人員工具監控它，並且不會添加任何內容。React插件CSS轉換組不在onEnter和onLeave上添加類

使用react-transition-group 2.0.1

我像這樣導入庫。

import {CSSTransition} from 'react-transition-group';

這是我的JSX代碼。

這是我的CSS代碼。

.submenu-enter { 
    opacity: 0.01; 
    top: 50px; 
} 

.submenu-enter.submenu-enter-active { 
    opacity: 1; 
    top: 0px; 
    transition: opacity 500ms ease-in, top 300ms ease-in; 
    -moz-transition: opacity 500ms ease-in, top 300ms ease-in; 
    -webkit-transition: opacity 500ms ease-in, top 300ms ease-in; 
} 

.submenu-leave { 
    opacity: 1; 
    top: 0px; 
} 

.submenu-leave.submenu-leave-active { 
    opacity: 0.01; 
    top: 50px; 
    transition: opacity 500ms ease-in, top 300ms ease-in; 
    -moz-transition: opacity 500ms ease-in, top 300ms ease-in; 
    -webkit-transition: opacity 500ms ease-in, top 300ms ease-in; 
}

先謝謝了，一直試圖讓這個工作兩個小時。

來源

2017-07-20 Daniel Barde

對不起，並不意味着要回避你的問題，但你知道有一個React文檔推薦的新包，而不是插件？請參閱[react-transition-group]（https://github.com/reactjs/react-transition-group/tree/v1-stable#high-level-api-csstransitiongroup）它支持CSSTransitionGroup – aug

@aug嗯，我試過但得到了相同的行爲，所以我回到之前使用的內容，我將更新我的代碼以反映新庫。 –

{ (this.state.selectedSubmenu == item.label) 
    && <CSSTransition classNames="submenu" timeout={500} children={submenus} /> 
}

變化

<CSSTransition className="submenu" timeout={500}> 
    {this.state.selectedSubmenu == item.label && submenu} 
</CSSTransition>

，因爲你必須使用靜態。否則它會出現並消失而沒有過渡。

btw：通過classNames您可能需要className？

來源

2017-07-21 15:02:19 Melounek

謝謝，這種方法很有效，但不得不回退到react-transition-group的1.x版本，非常感謝。 –

我使用的是'ReactCSSTransitionGroup'，我不知道這兩個庫之間的區別，但是這個對我來說看起來更新，更穩定。 – Melounek

React插件CSS轉換組不在onEnter和onLeave上添加類

回答

相關問題