https://blog.csdn.net/scorpio_h/article/details/85205579

添加购物车动画

添加购物车动画要 2个层

  1. 外面的 div层负责 transform: translate3d(56px, 0, 0) 平移
    1. 透明度 opacity从 0 到 1的显示过程
  2. 里面的 icon图标层负责 rotate滚动

image.png

  1. import { CSSTransition } from 'react-transition-group';
  3. <CSSTransition
  4.   in={show} // 什么时候添加样式
  5.   classNames='cart'
  6.   timeout={400} // 动画时长
  7.   unmountOnExit // 要销毁，否则层级大于 add按钮
  8.   >
  9.   <div
  10.     className={classnames(styles.decrease)}
  11.     onClick={onDecrease}
  12.     >
  13.     <div className='icon-remove_circle_outline' />
  14.   </div>
  15. </CSSTransition>

animate.less

  1. //入场动画
  2. .cart-enter, .cart-exit-done {
  3.   opacity: 0;
  4.   transform: translate3d(56px, 0, 0);
  6.   .icon-remove_circle_outline {
  7.     transform: rotate(180deg)
  8.   }
  9. }
  11. .cart-enter-active, .cart-exit {
  12.   opacity: 1;
  13.   transform: translate3d(0, 0, 0);
  14.   transition: all 0.4s linear; // 其他 class不需要添加 transition
  16.   .icon-remove_circle_outline {
  17.     transition: all 0.4s linear;
  18.     transform: rotate(0)
  19.   }
  20. }
  22. //入场动画执行完成后，这个 class会保留在 div上
  23. .cart-enter-done, .cart-exit {
  24.   opacity: 1;
  25.   transform: translate3d(0, 0, 0);
  27.   .icon-remove_circle_outline {
  28.     transform: rotate(0)
  29.   }
  30. }
  33. //出场动画，1 出场动画执行的第一个时刻
  34. //.cart-exit {
  35. //  opacity: 1;
  36. //  transform: translate3d(0, 0, 0);
  37. //}
  39. .cart-exit-active {
  40.   opacity: 0;
  41.   transform: translate3d(56px, 0, 0);
  42.   transition: all 0.4s linear;
  44.   .icon-remove_circle_outline {
  45.     transform: rotate(180deg);
  46.     transition: all 0.4s linear;
  47.   }
  48. }
  50. //出场动画执行完成后，这个 class会保留在 div上
  51. //.cart-exit-done {
  52. //  opacity: 0;
  53. //  transform: translate3d(56px, 0, 0);
  54. //}

CSSTransition

  1. function App() {
  2.   const [state, setState] = useState(false)
  4.   return (
  5.     <CSSTransition
  6.       in={state}
  7.       timeout={1000}
  8.       classNames="fade"
  9.       appear
  10.       unmountOnExit
  11.       onEntered={el => {el.style.color="red"}}
  12.     >
  13.       <div>item</div>  
  14.     </CSSTransition>
  15.   )
  16. }

入场类

less

  1. .fade-enter {}
  2. .fade-enter-active {}
  3. .fade-enter-done {}

出场类

  1. .fade-exit {}
  2. .fade-exit-active {}
  3. .fade-exit-done {}