反应元素淡入淡出

Question

我有一个Basket组件，BasketContents单击时需要切换一个组件。这有效：

constructor() {
    super();
    this.state = {
      open: false
    }
    this.handleDropDown = this.handleDropDown.bind(this);
  }
  handleDropDown() {
    this.setState({ open: !this.state.open })
  }
    render() {
        return(
            <div className="basket">
                <button className="basketBtn" onClick={this.handleDropDown}>
                    Open
                </button>
              {
                this.state.open
                ?
                <BasketContents />
                : null
              }
            </div>
        )
    }

它使用条件显示BasketContents或不显示组件。现在，我希望它逐渐消失。我尝试添加一个ComponentDidMount挂钩BasketContents以过渡不透明度，但这不起作用。有没有简单的方法可以做到这一点？

Answer 1

使用CSS类切换+不透明度转换的示例：https :
//jsfiddle.net/e7zwhcbt/2/

这是有趣的CSS：

.basket {
  transition: opacity 0.5s;
  opacity: 1;
}
.basket.hide {
  opacity: 0;
  pointer-events:none;
}

和render函数：

render() {
    const classes = this.state.open ? 'basket' : 'basket hide'
    return(
      <div className="basket">
        <button className="basketBtn" onClick={this.handleDropDown}>
          {this.state.open ? 'Close' : 'Open'}
        </button>
        <BasketContents className={classes}/>
      </div>
    )
  }