css – React.js转换不适用于“淡出”

我有一个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;
}

解决方法

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

原文链接：https://www.f2er.com/css/242411.html

css – React.js转换不适用于“淡出”

解决方法

猜你在找的CSS相关文章