Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <TransitionGroup>
- items.map((item,index) => (
- <CSSTransition
- key={item.id}
- timeout={1000}
- classNames="fade"
- <ItemPreview item={item} />
- </CSSTransition>
- ))
- </TransitionGroup>
- .fade-enter{
- opacity: 0;
- visibility: hidden;
- transition: all ease 1s;
- }
- .fade-enter.fade-enter-active{
- opacity: 1;
- visibility: visible;
- transition: all ease 1s;
- }
- .fade-exit {
- visibility: visible;
- opacity: 0;
- }
- .fade-exit.fade-exit-active{
- opacity: 0;
- visibility: hidden;
- transition: all ease 1s;
- }
- render(){
- const { items } = this.props;
- let delay_index = -1;
- let delay_jump = 100;
- return (
- <TransitionGroup>
- items.map((item,index) => {
- delay_index += offer.isNew ? 1 : 0;
- const delay = Math.max(0, delay_index*100);
- return (
- <CSSTransition
- key={item.id}
- timeout={1000 + delay}
- classNames="fade">
- <ItemPreview
- item={item}
- style={{transitionDelay: `${delay}ms`}} />
- </CSSTransition>
- )
- })
- </TransitionGroup>
- )
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement