Element Attenuation Reaction

Question

I have a Basket component that needs to switch the BasketContents component when clicked. It 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> ) } 

It uses a conditional expression to display the BasketContents component or not. Now I want it to fade. I tried adding a ComponentDidMount hook to BasketContents to block the opacity, but this will not work. Is there an easy way to do this?

Answer 1

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

Here is some interesting CSS:

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

And the render function:

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

Answer 2

I would use jet propulsion as follows:

 <Motion style={{currentOpacity: spring(this.state.open ? 1 : 0, { stiffness: 140, damping: 20 })}}> {({currentOpacity}) => <div style={{opacity: currentOpacity}}> <BasketContents /> </div> } </Motion> 

I have not tested it, but it should work.

Answer 3

I personally used react-animate-on-scroll . basic details (pun intended) for their creator @dbramwell on github. Sorted my criteria in about 5 minutes. BOOM. 🎉