Question

我有一个React.js组件，我正在尝试＆＃34;淡出＆＃34;使用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

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操作删除子节点。只有当您允许它通过反应渲染方法重新渲染时，此转换才有效。

Answer 2

我在CSS中发现问题只是删除了注释行：

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

React.js转换不适用于＆＃34;淡出＆＃34;

2 个答案: