爲什麼第一次設置屬性時不應用動畫（轉換）

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

「左」 屬性intialized爲 「自動」，沒有過渡可以應用。 相反試試這個：

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>