爲React.js中的不存在元素設置動畫

我有一個標題列表，當其中一個標題被點擊時，會打開一個附加信息。爲React.js中的不存在元素設置動畫

我的目標是使用反應動畫顯示此無序列表的外觀。我正在使用React.addons.CSSTransitionGroup，如React's docs中所述。

var React = require('react/addons'); 
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; 

.... 
render: function(){ 
    var ninjas = this.props.ninjaList.map(function(ninja, i){ 
      return (<li key={ninja} style={style.li}> {ninja} </li>); 
     }); 
    var list = (this.state.showList ? <ul style={style.ul}> {ninjas} </ul> : ''); 
    return (
     <div style={style.wrapper}> 
     <img style={style.img} src={this.props.imgPath} /> 
     <h5 style={style.h5} onClick={this.showList}> {this.props.title} </h5> 
     <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionEnterTimeout={1500} transitionLeaveTimeout={1300}> 
     {list} 
     </ReactCSSTransitionGroup> 
     </div> 
     ); 
}

的CSS是從他們的榜樣採取 -

.example-enter { 
    opacity: 0.01; 
} 

.example-enter.example-enter-active { 
    opacity: 1; 
    transition: opacity 500ms ease-in; 
} 

.example-leave { 
    opacity: 1; 
} 

.example-leave.example-leave-active { 
    opacity: 0.01; 
    transition: opacity 300ms ease-in; 
} 
.example-appear { 
    opacity: 0.01; 
} 

.example-appear.example-appear-active { 
    opacity: 1; 
    transition: opacity .5s ease-in; 
}

這裏有一個codepen我發現它 - CodePen

這基本上，尋找原因，這是行不通的。希望你的幫助，謝謝！

來源

2015-11-12 alexunder

感謝我的同事，發現問題 -

正如你可以在我的代碼中看到，無論是<ul> & <li>元素有他們對與過渡的CSS干擾「風格」屬性。

我將深入挖掘以找到解決方法，併發布更新。

來源

2015-11-12 11:37:24 alexunder

爲React.js中的不存在元素設置動畫

回答

相關問題