时间戳

首页 > 解决方案 > 为什么元素没有在 JavaScript 中获得过渡？

javascript - 为什么元素没有在 JavaScript 中获得过渡？

问题描述

我在这里有一个框，我希望它translateX(300px)使用 2000ms获得transition，这意味着它应该通过转换移动，但它不会随着转换移动，它只是transform立即获得属性 no 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>

标签： javascriptcss-transitions

解决方案

  1. 尽管在 HTML 5 中允许以数字开头 id，但我建议不要这样做 ( <div id="1box"></div>)。有时它在浏览器中可能会奇怪地失败（添加这个答案时，它在 CSS 和 JavaScript 中都失败了——在 Ubuntu 上使用 Chrome 90）。

  2. 此外，正如@TechySharnav 回答的那样，将您的代码放入一个window.onload事件中。这将确保在加载文档后执行您的代码（您已经构建了 DOM）。

  3. 一种更好的方法是使用类（这会从 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>

推荐阅读