React实现商品飞入购物车动画 jQuery代码转React方案

实现思路 #

完全对齐原jQuery示例的交互，用原生API实现，不需要引入jQuery或第三方动画库，符合React开发规范：

• 点击加购按钮时，先获取当前商品图片在视口里的位置
• 生成一个临时克隆的图片节点，固定定位在原图片位置，z-index调到最高不被其他元素遮挡
• 给克隆节点加CSS过渡，移动到购物车图标位置的同时把宽高缩到0
• 动画结束后删掉临时节点，同步更新购物车的金额、数量状态

代码修改步骤 #

1. 补充引入的Hook #

把原来react的引入行替换成下面的，加useRef用来拿DOM元素位置：

import React, { useState, useRef } from 'react';

2. 给图片容器绑定ref #

在组件里isHovering状态声明的下方，加ref声明：

const productImgWrapRef = useRef(null);

找到类名为styles.imageContainer的div标签，加上ref属性：

<div className={styles.imageContainer} ref={productImgWrapRef}>

3. 补全addToCartAnimation方法 #

提前给页面里的购物车图标元素加固定id cart-icon方便定位，方法代码如下：

const addToCartAnimation = () => {
  const originEl = productImgWrapRef.current;
  const cartEl = document.getElementById('cart-icon');
  if (!originEl || !cartEl) return;

  // 获取原图片和购物车的视口坐标
  const originRect = originEl.getBoundingClientRect();
  const cartRect = cartEl.getBoundingClientRect();

  // 创建克隆的临时图片节点
  const cloneImg = document.createElement('img');
  cloneImg.src = originEl.querySelector('img').src;
  // 初始位置和原图片完全重合
  cloneImg.style.cssText = `
    position: fixed;
    z-index: 9999;
    left: ${originRect.left}px;
    top: ${originRect.top}px;
    width: ${originRect.width}px;
    height: ${originRect.height}px;
    object-fit: cover;
    border-radius: 4px;
    transition: all 800ms ease-in-out;
    pointer-events: none;
  `;
  document.body.appendChild(cloneImg);

  // 触发重绘保证动画正常执行
  cloneImg.getBoundingClientRect();

  // 动画终点：移动到购物车位置，缩小到0
  cloneImg.style.left = `${cartRect.left}px`;
  cloneImg.style.top = `${cartRect.top}px`;
  cloneImg.style.width = '0px';
  cloneImg.style.height = '0px';
  cloneImg.style.opacity = '0';

  // 动画结束后清理临时节点，更新购物车状态
  setTimeout(() => {
    cloneImg.remove();
    // 此处替换为你项目里的购物车更新逻辑：累加价格、加商品数量即可
  }, 800);
}

补充说明 #

• 临时克隆的节点是直接挂在body下的，动画完就删除，不会干扰React虚拟DOM的渲染逻辑，不存在冲突问题
• 如果不方便给购物车加id，也可以用class选择器获取元素，和原jQuery写法逻辑一致，只是id选择器的匹配效率更高
• 过渡的缓动效果可以根据项目UI风格自行调整，800ms的动画时长和原jQuery示例完全一致

内容的提问来源于stack exchange，提问作者Jolan