在JavaScript中临时禁用CSS过渡修改HTML元素样式不可靠问题

嘿，针对你这个动态生成内容的交替移动动画需求，纯CSS确实搞不定——毕竟要同步动态元素的状态切换和位置重置，咱们用JavaScript来实现就顺手多了。我给你做了个极简的移动盒子示例，一步步拆解给你看：

1. 同一时间仅显示一个元素，初始状态先展示第一个盒子
2. 用平滑过渡/帧动画控制元素移动，保证流畅度
3. 单个元素移动完成后，隐藏并重置其位置，切换到另一个元素重复动画
4. 全程用JS控制状态同步，完美适配动态生成的内容

HTML（极简结构） #

<!-- 可以动态生成这些元素，JS逻辑完全兼容 -->
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>

CSS（基础样式与过渡） #

.box {
  position: absolute;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  color: #fff;
  border-radius: 4px;
  display: none; /* 默认隐藏 */
}
.box1 {
  background: #2196F3;
  left: 50px;
  top: 100px;
}
.box2 {
  background: #F44336;
  left: 50px;
  top: 100px;
}

JavaScript（动画控制核心） #

这里用requestAnimationFrame实现帧级控制，比定时器更流畅，完全适配浏览器刷新节奏：

const box1 = document.querySelector('.box1');
const box2 = document.querySelector('.box2');
let currentActiveBox = box1;
let animationStartTime = null;
const totalAnimationTime = 1500; // 单个元素移动总时长（毫秒）
const targetPositionX = 350; // 移动后的目标X坐标（初始是50，移动300px）

// 缓动函数，让动画更自然（可选，替换成线性也可以）
function easeOutQuad(progress) {
  return 1 - Math.pow(1 - progress, 2);
}

function runBoxAnimation(timestamp) {
  if (!animationStartTime) animationStartTime = timestamp;
  
  // 计算动画进度（0到1）
  const progress = Math.min((timestamp - animationStartTime) / totalAnimationTime, 1);
  const easedProgress = easeOutQuad(progress);
  
  // 计算当前位置并更新
  const currentX = 50 + (targetPositionX - 50) * easedProgress;
  currentActiveBox.style.left = `${currentX}px`;
  
  if (progress < 1) {
    // 动画未完成，继续下一帧
    requestAnimationFrame(runBoxAnimation);
  } else {
    // 单个动画完成，切换元素
    currentActiveBox.style.display = 'none';
    // 重置当前元素位置
    currentActiveBox.style.left = '50px';
    
    // 切换到另一个盒子
    currentActiveBox = currentActiveBox === box1 ? box2 : box1;
    currentActiveBox.style.display = 'block';
    animationStartTime = null;
    
    // 给个小间隔，让切换更自然
    setTimeout(() => requestAnimationFrame(runBoxAnimation), 200);
  }
}

// 启动动画
currentActiveBox.style.display = 'block';
requestAnimationFrame(runBoxAnimation);

如果你的元素是动态生成的，只需要把新创建的元素对象加入到切换逻辑里就行，比如：

// 动态创建一个新盒子
function createDynamicBox(color, text) {
  const box = document.createElement('div');
  box.className = 'box';
  box.textContent = text;
  box.style.background = color;
  box.style.left = '50px';
  box.style.top = '100px';
  document.body.appendChild(box);
  return box;
}

// 替换成动态元素数组
const boxes = [
  createDynamicBox('#2196F3', 'Dynamic Box 1'),
  createDynamicBox('#F44336', 'Dynamic Box 2')
];
let currentIndex = 0;
currentActiveBox = boxes[currentIndex];

// 切换逻辑改成数组索引切换
currentIndex = (currentIndex + 1) % boxes.length;
currentActiveBox = boxes[currentIndex];

• 优先用requestAnimationFrame替代setTimeout/setInterval，避免丢帧
• 使用CSS transform代替left/top修改位置（如果用过渡的话），因为transform会触发GPU加速，更流畅
• 加入缓动函数（比如上面的easeOutQuad），让动画过渡更自然，避免生硬的线性移动

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