1

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;
}
RiddleRiddlerRddler
  • 303
  • 3
  • 17
  • The transition should allways be on the element not only when animating – ShobiDobi May 19 '20 at 08:59
  • Could you explain this a bit more? What change should I make? Thanks! – RiddleRiddlerRddler May 19 '20 at 09:08
  • something like that ```.mainclass{ transition: opacity 200ms; } .slide-transition-enter{ opacity: 0; } .slide-transition-enter-active{ opacity: 1; } .slide-transition-exit{ opacity: 1; } .slide-transition-exit-active{ opacity: 0; }``` you can read here for more information https://www.w3schools.com/css/css3_transitions.asp – ShobiDobi May 19 '20 at 09:10
  • I've just tried that but it still doesn't seem to make any difference? Maybe I'm misunderstanding? I've taken a look at that link but still can't understand the issue. It also doesn't talk the CSSTransition methods which I feel is the issue here. – RiddleRiddlerRddler May 19 '20 at 09:13
  • Yes but also add a transition on a static class that stays on the element class list always I called that class mainClass for the example – ShobiDobi May 19 '20 at 09:16
  • Ok, I understand that now, thanks! But unfortunately it's still not working... – RiddleRiddlerRddler May 19 '20 at 09:19
  • Can you provide a JSbin or other snippet? – ShobiDobi May 19 '20 at 09:22
  • Please provide a working snippet to evaluate how your script works for updating the transition-classes. Therefore it is way easier to find out why the transition CSS doesn't work. – Gerrit Halfmann May 19 '20 at 09:25
  • Well that was tricky enough in itself, getting codepen to work! (after failing with jsbin and jsfiddle!) But here we are, (non) working example: https://codepen.io/Riddleriddleriddler/pen/YzyRmGz – RiddleRiddlerRddler May 19 '20 at 12:15

1 Answers1

0

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;
}
ShobiDobi
  • 179
  • 1
  • 13