Introduction
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
- Install package or include CDN
https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/4.3.0/react-transition-group.js
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 => (
<TransitionGroup>
<CSSTransition key={product.id} timeout={500} classNames="item">
<MenuItem product = {product} />
</CSSTransition>
</TransitionGroup>
))}
</div>
</div>
)
That's it!
Implementations
Articles
There are some of my articles. Feel free to check if you like!
- My blog-posts for software developing: https://medium.com/a-layman
- My web resume: https://jenhsuan.github.io/ALayman/cover.html
- Facebook page: https://www.facebook.com/imalayman
Top comments (0)