React.js转换不适用于"淡出"

Question

我有一个React.js组件,我试图使用React CSS Transitions"淡出".它适用于淡入淡出,但是当我点击删除对象时,它会立即消失(而不是漂亮的淡化效果).

码:

<ReactCSSTransitionGroup 
    transitionName="example"
    transitionAppear={true}
    transitionLeave={true}
    transitionEnterTimeout={600}
    transitionAppearTimeout={600}
    transitionLeaveTimeout={300}
>
    some object
</ReactCSSTransitionGroup>

CSS:

/ 反应过渡 /

.example-enter {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.example-enter.example-enter-active {
  opacity: 1;
}

.example-leave {
  opacity: 1;
  transition: opacity 1s ease-in;
}

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

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

.example-appear.example-appear-active {
  opacity: 1;
}

Answer 1

这是一个有效的jsfiddle演示

var {CSSTransitionGroup} = React.addons;

var Fade = React.createClass({
    getInitialState () {
        return {
            items: ["Hello"]
        }
    },
    clickHandler (e) {
        this.setState({items:[]});
    },
    render: function() {
        var {items} = this.state;
        return (
            <CSSTransitionGroup  transitionName="example"
        transitionAppear={true}
        transitionLeave={true}
        transitionEnterTimeout={600}
        transitionAppearTimeout={600}
        transitionLeaveTimeout={300}>
            {items.map(item => <div onClick={this.clickHandler}>{item}</div>)}
        </CSSTransitionGroup>
        );
    }
});

ReactDOM.render(<Fade/>, document.getElementById('container'));

我猜你试图使用DOM操作删除子节点.仅当您允许它通过反应渲染方法重新渲染时,此转换才有效.

Answer 2

I Found the problem in your CSS just remove commented line:

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