反应元素淡入淡出 [英] React fade in element

问题描述

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

I have a Basket component which needs to toggle a BasketContents component when clicked on. This works:

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组件.现在，我希望它逐渐消失.我尝试向BasketContents添加ComponentDidMount挂钩以过渡不透明度，但这不起作用.有没有简单的方法可以做到这一点?

It uses a conditional to either display the BasketContents component or not. I now want it to fade in. I tried adding a ComponentDidMount hook to BasketContents to transition the opacity but that doesn't work. Is there a simple way to do this?

推荐答案

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

An example using css class toggling + opacity transitions:
https://jsfiddle.net/e7zwhcbt/2/

这是有趣的CSS:

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

和渲染功能:

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>
    )
  }

这篇关于反应元素淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！