为什么元素没有在 JavaScript 中进行转换？

Question

我这里有一个框，我希望它在 2000 毫秒 transition 时获得 translateX(300px)，这意味着它应该随着过渡移动，但它不会移动使用转换，它立即得到 transform 属性而没有 transition，我不知道为什么，我怎样才能让它随着在 JavaScript?

中声明的转换

document.getElementById('1box').style.transition = 'all 1000ms';
document.getElementById('1box').style.transform = 'translateX(300px)';

*{
            padding: 0;
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin: auto;
            transition: 1000ms;
        }

<div id="1box"></div>

Answer 1

通过 css 在元素上添加过渡属性。

#lbox {
    transition: transform 2s;
}

或反转您的 js 声明的顺序：

document.getElementById('1box').style.transition = 'transform 2s';
document.getElementById('1box').style.transform = 'translateX(300px)';

Answer 2

您需要使用 window 的 onload 函数，并将所有样式放在函数中。

window.onload = function() {
  document.getElementById('1box').style.transition = 'all 1000ms';
  document.getElementById('1box').style.transform = 'translateX(300px)';
}

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

div {
  width: 200px;
  height: 200px;
  background-color: yellow;
  margin: auto;
}

<div id="1box"></div>

Answer 3

虽然在 HTML 5 中允许 id 以数字开头，但我建议不要这样做 (<div id="1box"></div>)。有时它可能会在浏览器中奇怪地失败（添加此答案时，它在 CSS 和 JavaScript 中都失败了 - 在 Ubuntu 上使用 Chrome 90）。
此外，正如@TechyShaarnav 回答的那样，将您的代码放入 window.onload 事件中。这将确保您的代码在文档加载后执行（您已经构建了 DOM）。
更好的方法是使用类（这会从您的 JavaScript 代码中删除样式，并将所有内容放在一个位置，您的 CSS 文件）。此外，类可以像添加它们一样轻松删除，并且您还可以执行反向动画。

window.addEventListener('load', function() {
  document.querySelector('#box1').classList.add('right-sidebar');
})

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#box1 {
  width: 200px;
  height: 200px;
  background-color: yellow;
  margin: auto;
  transition: all 2s;
}

.right-sidebar{
  transform: translate(300px);
  transition: all 2s;
}

<div id="box1"></div>

为什么元素没有在 JavaScript 中进行转换？

Why isn't the element getting the transition in JavaScript?

javascript

css-transitions