css - React.js 转换不适用于 "fade out"

Question

我有一个 React.js 组件，我正尝试使用 React CSS Transitions 使其“淡出”。它的淡入效果很好，但是当我单击以删除对象时，它会立即消失(而不是漂亮的淡入效果)。

代码:

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

CSS:

/React 转换/

.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

Here is a working jsfiddle demo

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 操作删除子节点。仅当您允许它通过 React 渲染方法重新渲染时，此转换才会起作用。