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以进行转换。

Answer 2

从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 {
            left: 0;
            width: 100px;
            height: 100px;
            background: green;
            position: relative;
            transition: left 1s;
        }

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

Answer 3

As＆＃34; left＆＃34;属性初始化为＆＃34; auto＆＃34;，不能应用任何转换。相反，试试这个：

＆＃13;

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";
    });
})

＆＃13;

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

＆＃13;

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

＆＃13;

为什么第一次设置属性时不应用动画（过渡）

3 个答案: