

The four main states a Transition can be in are: The transition component tracks the “enter” and “exit” states for the component. Personally, I tend to favor CSSTransition over the straight Transition component, but that’s just me. Most commonly it’s used to animate the mounting and unmounting of a component, but it can also be used to describe in-place transition states as well. This component lets you describe a transition from one component state to another over a span of time with a simple API. The first component to cover is Transition. React Transition Group offers four different types of components for users to choose from based on their animation needs. Now that you know a little more about RTG’s approach to animation, let me cover a few of the different component options it gives users, and how they work. That’s a pretty good endorsement for trying RTG, in my book. It doesn’t care nearly as much about what type of animation you’d like to do, it just makes it easier to do any sort of animation on any React component with as little hassle as it can.Īnd it doesn’t hurt to know that React Transition Group began in the original React framework (it’s mentioned in the docs) before being spun out into a new package to be maintained by the community. React Transition Group is a lower-level type of animation library. Instead it exposes transition stages, manages classes and group elements and manipulates the DOM in useful ways, making the implementation of actual visual transitions much easier.” Unlike other React animation libraries like React Spring or React Reveal, React Transition Group “exposes simple components useful for defining entering and exiting transitions…it does not animate styles by itself. React Transition Group What makes it different?
