反应淡化元素

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

constructor() {
    super();
    this.state = {
      open: false
    }
    this.handleDropDown = this.handleDropDown.bind(this);
  }
  handleDropDown() {
    this.setState({ open: !this.state.open })
  }
    render() {
        return(
            

                
                    Open
                
              {
                this.state.open
                ?
                
                : null
              }
            
        )
    }

它使用条件来显示BasketContents组件与否.我现在希望它淡入.我尝试添加一个ComponentDidMount钩子BasketContents来转换不透明度,但这不起作用.有一个简单的方法吗？

使用css类切换+不透明度转换的示例: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(
      

        
          {this.state.open ? 'Close' : 'Open'}
        
        
      
    )
  }