wy-linux/animation-shop-car

React Hook 封装的收藏加购动画组件

React Hook 封装的ShopCar组件，加入购物车的动画效果

1. npm install  下载相关依赖
2. npm run start 启动项目
3. npm run build 打包组件，可自由导出使用

css3-animation -> hook 将核心逻辑封装成一个自定义Hook,以便于逻辑复用

export function useAnimationCar<T extends HTMLElement>()

css3-animation使用css3动画帧制作动态加购效果

.circle {
  position: fixed;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 20px;
  left: var(--left);
  top: var(--top);
  border: 2px solid #454545;
  --duration: 0.8s;
  /* css贝塞尔曲线详见： https://www.runoob.com/cssref/func-cubic-bezier.html */
  animation: moveY var(--duration) cubic-bezier(0.5, -0.5, 1, 1);
}

canvas-animation使用canvas画布制作动态加购效果

TODO