CSSTransition transition-enter-active event not working as expected

问题

I'm new to JS, React and CSSTransition so please excuse me if any of this is obvious. I'm trying to enter some basic enter/exit animations for a div (ideally slide in from right and slide out to left, but just trying to use opacity for now to keep it simple).

While I can get the page to render, I can't get and of the following CSS events to work: *-transition-enter, *-transition-enter-active, *-transition-exit, *-transition-exit-active

However, whilst playing around with it I have managed to get some functionality working using the events: *-enter-done, *-exit-done

However, I then can't get it to work for a slide in/out transition.

This has perplexed me, so hoping you can point me in the right direction. A few code snippets: App.js

  switch = () => {
  this.setState(prevState => ({
    slide: !prevState.slide
  }));

  render() {
    return (
    <button type="button" onClick={this.switch}> Click </button>

    <CSSTransition
      in={this.state.slide}
      classNames='slide'
    >
       <div>
          <p>Text here</p>
       </div>
    </CSSTransition>
)

And the my App.css

.slide-transition-enter{
opacity: 0;
}

.slide-transition-enter-active{
  opacity: 1;
  transition: opacity 200ms;
}

.slide-transition-exit{
  opacity: 1;
}

.slide-transition-exit-active{
  opacity: 0;
  transition: opacity 200ms;
}

回答1:

You used the wrong class names in your CSS here I fixed it Also you should increse the timeout in your code to make it more smooth

.test{
  transition: opacity 1000ms;
}

/* This fires as soon as the element enters the DOM */
.slide-enter{
opacity: 0;
}

/* This is where we can add the transition*/
.slide-enter-active{
  opacity: 1;

}

/* This fires as soon as the this.state.showList is false */
.slide-exit{
  opacity: 1;
}
/* fires as element leaves the DOM*/
.slide-exit-active{
  opacity: 0;
}

来源：https://stackoverflow.com/questions/61887088/csstransition-transition-enter-active-event-not-working-as-expected

标签

javascript

css

reactjs

css-transitions