Having trouble with react transition group!

Project Feedback
#1

Hey guys need bit of help here…

Using a feature in this library called https://reactcommunity.org/react-transition-group/transition-group
and I am trying to create something like this using react-reveal animation library. https://www.react-reveal.com/examples/advanced/todo/

Looks like it’s working mostly fine except when an element leaves DOM and gets removed it doesn’t do animations. Here is a link to my project. https://put-em-down.netlify.com/

And a link to my repo. https://github.com/shimphillip/put-em-down
You just have to look at my Todos.js and Todo.js
https://github.com/shimphillip/put-em-down/blob/master/src/components/Dashboard/Todos/Todos.js
https://github.com/shimphillip/put-em-down/blob/master/src/components/Dashboard/Todos/Todo/Todo.js

Sorry lots of links here and thanks in advance!

#2

TransitionGroup is just a wrapper around Transition or CSSTransition components (that do the timings and that you don’t have). Without those components your todo gets removed immediately together with react-reveal’s Fade.

You could remove TransitionGroup altogether and nothing will change.

Mix and matching different animation libraries is generally a bad idea.

1 Like
#3

Hmm yeah but this particular example achived it though. https://www.react-reveal.com/examples/advanced/todo/

Feels like this stuff is over my head for now, I guess I will revisit this topic later once I feel like I gained enough experience.

Thanks for the reply!

#4

Hmm :thinking: , then I stand corrected.

My guess would be that Fade implements the same interface that Transition. If that’s correct then it should be direct child of TransitionGroup.

#5