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画布制作动态加购效果