Question

我有一个标题列表，当点击其中一个时，会打开一个附加信息。

我的目标是使用react来设置此无序列表的外观。我正在使用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

基本上就是这样，寻找它不起作用的原因。非常感谢你的帮助，谢谢！

Answer 1

Thanks to a colleague of mine, the problem was found -

As you can see in my code, both the <ul> & <li> elements have their on 'style' attribute that interfered with the CSS of the transition.

I'm going to dig in deeper to find a way to workaround it, will post an update.

在React.js中动画不存在的元素

1 个答案: