Cover image for Day 3 of #100DaysOfCode: Create transitions with React-transition-group

Day 3 of #100DaysOfCode: Create transitions with React-transition-group

jenhsuan profile image Jen-Hsuan Hsieh ・1 min read


It looks better if we add transitions when adding or removing items on the page. Today I tried to use React-transition-group for transitions.

Steps to use React-transition-group

  1. Install package or include CDN

2.Import package to the React Component

const { CSSTransition, TransitionGroup } = ReactTransitionGroup;

3.Wrap the component with TransitionGroup and CSSTransition

return (
        <div className="container menu-container">
            <div className="row">
                products.map(product => (
                        <CSSTransition key={product.id} timeout={500} classNames="item">
                            <MenuItem product = {product} />

That's it!



There are some of my articles. Feel free to check if you like!

Posted on by:

jenhsuan profile

Jen-Hsuan Hsieh


6+ year work experience in the software engineering field. 2+ year work experience with front-end JavaScript framework like React.js, Knockout.js. and Microsoft solution.


markdown guide