使用anime.js实现div元素Y轴位置平滑动画的异常问题

你的问题出在CSS属性写法错误，单独的translateY不是合法的CSS属性，anime.js无法读取到你设置的初始偏移值，导致动画直接跳转到目标位置。

修正后的代码 #

HTML结构（保持不变） #

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

CSS样式（修正transform属性） #

.div{ 
  border: 1px solid white;
  padding: 10px;
  transform: translateY(100px); /* 将translateY纳入transform属性内 */
}

JavaScript代码（可简化单位写法） #

anime({
   targets: ".div",
   duration: 1000,
   easing: "easeOutElastic",
   translateY: 0, /* 直接写数字即可，anime.js会自动处理单位 */
 })

原理说明 #

• 错误的translateY: 100px写法不会生效，元素初始Y轴偏移仍为默认的0，所以动画看起来是直接跳到0（实际未触发过渡）。
• 反向动画正常是因为初始值为0，目标值100px是有效的，anime.js能正确计算过渡过程。

内容的提问来源于stack exchange，提问作者S a h a d S a j