如何实现元素从absolute到fixed定位的平滑CSS过渡动画？

你遇到的核心问题是position属性切换（absolute→fixed）会中断CSS过渡动画——因为这属于触发重排的属性变更，浏览器会直接跳转到最终状态。下面提供两种可行方案：

方案一：过渡动画完成后再切换定位 #

先让元素以absolute定位完成“移动到页面底部”的过渡动画，等动画结束后再修改为fixed定位，既保留平滑动画，又能实现最终的固定效果。

修改后的代码： #

CSS

.parent {
  position: absolute;
  left: 0;
  top: 0;
  background: #ccc;
  height: 300px;
  width: 300px;
}

.mini {
  position: absolute;
  bottom: 200px;
  right: 0;
  background: orange;
  height: 100px;
  transition: all 0.5s;
  width: 300px;
}

/* 先定义移动到页面底部的样式（保持absolute） */
.hov-move {
  bottom: 0;
  right: 0;
}

/* 动画完成后切换为fixed */
.hov-fixed {
  position: fixed;
  /* 保持位置与动画结束时一致 */
  bottom: 0;
  right: 0;
}

JavaScript

const miniEl = document.querySelector('.mini');

document.body.addEventListener('click', function() {
  // 先添加移动动画的类
  miniEl.classList.add('hov-move');
  
  // 监听过渡结束事件，动画完成后切换为fixed
  miniEl.addEventListener('transitionend', function onTransitionEnd() {
    miniEl.classList.add('hov-fixed');
    // 移除监听避免重复触发
    miniEl.removeEventListener('transitionend', onTransitionEnd);
  }, { once: true });
});

HTML（无需修改）

<div class="parent">
  <div class="mini">
    <div class="b">Maecenas eu erat condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem.</div>
  </div>
</div>

方案二：使用双层容器分离动画与定位 #

额外添加一个外层容器负责执行“移动到页面底部”的过渡动画，内部内容元素在动画结束后设置为fixed定位，这种方式更灵活，适合复杂场景。

修改后的代码： #

HTML

<div class="parent">
  <!-- 新增外层容器负责动画 -->
  <div class="mini-container">
    <div class="mini">
      <div class="b">Maecenas eu erat condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem.</div>
    </div>
  </div>
</div>

CSS

.parent {
  position: absolute;
  left: 0;
  top: 0;
  background: #ccc;
  height: 300px;
  width: 300px;
}

.mini-container {
  position: absolute;
  bottom: 200px;
  right: 0;
  height: 100px;
  width: 300px;
  transition: all 0.5s;
}

.mini {
  background: orange;
  height: 100%;
  width: 100%;
}

/* 容器移动到页面底部 */
.hov-container {
  bottom: 0;
  right: 0;
}

/* 动画完成后内容固定 */
.hov-fixed .mini {
  position: fixed;
  bottom: 0;
  right: 0;
}

JavaScript

const containerEl = document.querySelector('.mini-container');

document.body.addEventListener('click', function() {
  containerEl.classList.add('hov-container');
  
  containerEl.addEventListener('transitionend', function onTransitionEnd() {
    containerEl.classList.add('hov-fixed');
    containerEl.removeEventListener('transitionend', onTransitionEnd);
  }, { once: true });
});

两种方案核心思路都是先完成位移动画，再修改定位属性，以此避免position切换中断动画的问题，你可以根据实际场景选择合适的方案。

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