Question

90

React fade in element

rated 0 times [ 97] [ 7] / answers: 1 / hits: 60692 / 7 Years ago, wed, january 25, 2017, 12:00:00

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>

        )

    }

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

haden

Add To Favorites

Follow

Total Points: 638

Total Questions: 95

Total Answers: 99

Location: Burundi

Member since Wed, Nov 25, 2020

4 Years ago

answered 7 Years ago albert · Accepted Answer

An example using css class toggling + opacity transitions:

https://jsfiddle.net/ybktodLc/

Here's the 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>

    )

  }