4

How can I change transitions with react-transition-group (2.4.0, if it matters)?

I currently have the following structure (with react-router)

<CSSTransition key={x} timeout={100} classNames={transition}>
    <Switch>
        <Route render={() => <span>foo</span>}/>
        <Route render={() => <span>bar</span>}/>
    </Switch>
</CSSTransition>

It works fine with a fixed classNames, except I would like some pages to have a different transition.

If I just change the classNames of the CSSTransition, it seems like it corrupts the state, it ends up putting the -enter-done class of the new animation, but the -enter class of the old one still remains.

This company is turning evil.
  • 5,021
  • 5
  • 34
  • 58
  • 1
    I would like to help you. Can you post more of the code? Seems like you can/should be using `TransitionGroup` the way you have the props setup. Also would be good to see how `x` and `transition` are set. – PsiKai Mar 02 '22 at 01:52
  • Hi @PsiKai, unfortunately this was a work project and I'm no longer at that company, so I'm afraid I don't have any more code. Thanks for the intention though! – This company is turning evil. Mar 02 '22 at 14:46
  • 1
    Totally understandable. I figured it was a long shot with such an old post, but I just wanted to help future generations if possible. – PsiKai Mar 02 '22 at 15:43

0 Answers0