javascript - 为什么第一次设置属性时不应用动画(过渡)

Question

这是一个简单的设置，其中使用 left 属性将盒子向右移动。通过单击按钮更新该属性。为什么我第一次点击按钮时没有应用过渡动画？

document.addEventListener('DOMContentLoaded', () => {
  const box = document.querySelector('.box');
  const button = document.querySelector('button');
  button.addEventListener('click', () => {
    const current = parseInt(box.style.left);
    box.style.left = (isNaN(current) ? 0 : current) + 50 + "px";
  });
})

.box {
  width: 100px;
  height: 100px;
  background: green;
  position: relative;
  transition: left 1s;
}

<button>Click me!</button>
<div class="box"></div>

Answer 1

left 的初始值为auto，auto 不是可转换的值。

您需要显式设置 left: 0 才能进行转换。