Advertisement
Guest User

Untitled

a guest
Feb 23rd, 2019
61
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.35 KB | None | 0 0
  1. <TransitionGroup>
  2. items.map((item,index) => (
  3. <CSSTransition
  4. key={item.id}
  5. timeout={1000}
  6. classNames="fade"
  7. <ItemPreview item={item} />
  8. </CSSTransition>
  9. ))
  10. </TransitionGroup>
  11.  
  12. .fade-enter{
  13. opacity: 0;
  14. visibility: hidden;
  15. transition: all ease 1s;
  16. }
  17.  
  18. .fade-enter.fade-enter-active{
  19. opacity: 1;
  20. visibility: visible;
  21. transition: all ease 1s;
  22. }
  23.  
  24. .fade-exit {
  25. visibility: visible;
  26. opacity: 0;
  27. }
  28.  
  29. .fade-exit.fade-exit-active{
  30. opacity: 0;
  31. visibility: hidden;
  32. transition: all ease 1s;
  33. }
  34.  
  35. render(){
  36. const { items } = this.props;
  37. let delay_index = -1;
  38. let delay_jump = 100;
  39. return (
  40. <TransitionGroup>
  41. items.map((item,index) => {
  42. delay_index += offer.isNew ? 1 : 0;
  43. const delay = Math.max(0, delay_index*100);
  44.  
  45. return (
  46. <CSSTransition
  47. key={item.id}
  48. timeout={1000 + delay}
  49. classNames="fade">
  50. <ItemPreview
  51. item={item}
  52. style={{transitionDelay: `${delay}ms`}} />
  53. </CSSTransition>
  54. )
  55. })
  56. </TransitionGroup>
  57. )
  58. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement