如何实现div元素平滑上下往复动画？现有JS判断逻辑存在问题

嘿，我来帮你搞定这个div平滑上下往复的动画问题～先看看你原来JavaScript代码里的逻辑bug：

你写了两个独立的if判断：

if (v >= 0) { v++;} 
if (v === 200) { v--; }

当v走到200的时候，第一个if会先把v变成201，第二个if因为v已经不是200了，完全不会触发，所以元素会一直往下跑，根本不会回头。这就是问题的核心！

下面给你两种解决方案，任选其一都能实现预期效果：

方案1：修复JavaScript逻辑 #

我们可以加一个方向变量来控制元素的移动方向，当到达上下边界时切换方向，这样就能实现平滑往复了：

<div class="verticalDiv" id="verticalDiv"></div>

.verticalDiv { 
  position: absolute; 
  top: 0px; 
  right: 500px; 
  width: 100px; 
  height: 100px; 
  background: red; 
  /* 去掉margin，因为absolute定位下margin可能会干扰top值的计算 */
}

let v = 0;
let direction = 1; // 1=向下移动，-1=向上移动
const redBox = document.getElementById('verticalDiv');

function verticalMove() {
  // 更新位置
  redBox.style.top = v + "px";
  
  // 判断边界，切换方向
  if (v >= 200) {
    direction = -1;
  } else if (v <= 0) {
    direction = 1;
  }
  
  // 根据方向更新v值
  v += direction;
}

// 启动定时器
const myVar1 = setInterval(verticalMove, 50);

方案2：用CSS动画实现（更简洁！） #

其实不需要JavaScript，用CSS的@keyframes就能轻松实现这个效果，代码更简洁，性能也更好：

<div class="verticalDiv"></div>

.verticalDiv { 
  position: absolute; 
  top: 0px; 
  right: 500px; 
  width: 100px; 
  height: 100px; 
  background: red; 
  /* 设置动画：名称、时长、缓动效果、无限循环 */
  animation: upDown 2s ease-in-out infinite;
}

/* 定义上下移动的关键帧 */
@keyframes upDown {
  0% {
    top: 0px;
  }
  50% {
    top: 200px; /* 底部位置 */
  }
  100% {
    top: 0px;
  }
}

这样元素会自动平滑地上下往复移动，不需要手动写定时器和逻辑判断，是不是更省心？

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