如何实现Div1到Div2的流畅CSS Animation变换？

核心解决思路 #

放弃手动计算translate像素值的方式，通过JS自动获取目标元素的位置、尺寸、旋转参数，配合CSS transition实现所有属性的同步平滑过渡。同时优先使用transform的scale/rotate/translate组合（GPU加速属性），避免直接修改width/height这类易引发重排的属性，解决跳变问题。

完整代码实现 #

HTML结构 #

<div class="box box1">Div1</div>
<div class="box box2">Div2</div>
<button onclick="triggerTransition()">开始变换</button>

CSS样式 #

.box {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  /* 指定过渡属性及时长，用cubic-bezier优化动画曲线 */
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.6s ease,
              width 0.6s ease,
              height 0.6s ease;
  /* 确保变换原点统一为中心，避免旋转/缩放偏移 */
  transform-origin: center;
}

.box1 {
  width: 100px;
  height: 100px;
  top: 20px;
  left: 20px;
  background-color: #ff4444;
}

.box2 {
  width: 200px;
  height: 150px;
  top: 150px;
  left: 300px;
  background-color: #0099cc;
  transform: rotate(30deg);
}

JS逻辑（自动计算所有参数） #

function triggerTransition() {
  const source = document.querySelector('.box1');
  const target = document.querySelector('.box2');

  // 获取元素在视口中的真实位置与尺寸
  const sourceRect = source.getBoundingClientRect();
  const targetRect = target.getBoundingClientRect();

  // 计算位移偏移量
  const offsetX = targetRect.left - sourceRect.left;
  const offsetY = targetRect.top - sourceRect.top;

  // 计算缩放比例
  const scaleX = targetRect.width / sourceRect.width;
  const scaleY = targetRect.height / sourceRect.height;

  // 获取目标元素的旋转角度
  const targetTransform = window.getComputedStyle(target).transform;
  const rotateDeg = targetTransform.match(/rotate\((\d+)deg\)/)?.[1] || 0;

  // 一次性设置所有变换属性
  source.style.transform = `translate(${offsetX}px, ${offsetY}px) rotate(${rotateDeg}deg) scale(${scaleX}, ${scaleY})`;
  source.style.width = `${targetRect.width}px`;
  source.style.height = `${targetRect.height}px`;
  source.style.backgroundColor = window.getComputedStyle(target).backgroundColor;
}

问题根源解析 #

• keyframes跳变：你之前的keyframes同时修改了width/height和transform，前者会触发浏览器重排，后者是合成层动画，两者渲染优先级不同导致不同步，出现跳变。优先用transform: scale()代替直接修改宽高，能大幅提升流畅度。
• 手动计算translate出错：元素位置受父元素定位、外边距、滚动状态等影响，硬编码像素值极易出错，getBoundingClientRect()能获取元素实时的视口坐标，自动计算偏移量更准确。

可选优化 #

• 如果不需要保留Div2，可在触发动画后设置target.style.display = 'none'。
• 若要实现反向变换，可保存Div1的初始状态参数，点击按钮时切换状态。
• 把transition的属性列表写得更具体，避免不必要的属性参与过渡，进一步优化性能。

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