使用 JavaScript 设置时，CSS 位置转换根本不起作用

Question

我想做以下事情：

1. 显示一个 div 元素；
2. 将其移动到初始位置；
3. 设置过渡属性；
4. 使用 CSS 过渡将其移动到目标位置。

一个最小的例子：

 function bla() { /* var obj = $('#box'); obj.css("left", "200px"); obj.css("display", "initial"); obj.addClass("trans"); obj.css("left", "500px"); */ var elem = document.getElementById('box'); elem.style.left = "200px"; elem.style.display = "initial"; elem.className = "box trans"; elem.style.left = "500px"; }

 #btn { position: fixed; top: 60px; left: 0px; width: 50px; height: 50px; background-color: #FEDCBA; } .box { display: none; position: fixed; top: 0px; left: 0px; width: 50px; height: 50px; background-color: #ABCDEF; } .box.trans { -webkit-transition: left 2s; -moz-transition: left 2s; transition: left 2s; }

 <div id="box" class="box"></div> <div id="btn" onclick="bla()">click here</div>

JSFiddle 。

它根本不起作用。 怎么了？

如果我将元素设置为初始可见，我会从原点left:0开始平滑过渡，这很奇怪，因为我分配了elem.style.left = "200px"; 在我实际添加过渡属性之前......

Answer 1

您应该避免在 javascript 中使用样式，只需切换年级将所有动画放在 css 文件中即可。

你不能把transition和display: none;放在一起 , 你必须使用opacity: 0; 反而。

 function bla() { var obj = $('#box'); obj.toggleClass("trans"); }

 #btn { position:fixed; top:60px; left:0px; width:50px; height:50px; background-color:#FEDCBA; } .box { opacity: 0; position:fixed; top:0px; left:0px; width:50px; height:50px; background-color:#ABCDEF; -webkit-transition: transform 2s,opacity 2s; transition: transform 2s,opacity 2s; } .box.trans { opacity: 1; -ms-transform: translate(500px,0); /* IE 9 */ -webkit-transform: translate(500px,0); /* Safari */ transform: translate(500px,0); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="box" class="box"> </div> <div id="btn" onclick="bla()"> click here </div>

Answer 2

DOM 更改在可以呈现之前不会生效。 Javascript 是单线程的（意味着您不能同时运行两段代码），并且与渲染周期在同一线程上运行。

因此，除非您通过推迟 JS 代码的执行（使用setTimeout或requestAnimationFrame ）给它时间来查看 DOM 的新状态，否则渲染器无法触发。 因此，除非您给浏览器时间进行渲染，否则只有在渲染器查看 DOM 之前的最终值才是重要的。

这个对上一个问题的回答讨论了规则的例外情况。

Answer 3

我无法解释为什么。 也许有人可以，我也很好奇，但超时有效。

setTimeout(function(){
    elem.style.left = "500px";
},1);

可能是太快了分配属性留下 500 和过渡记录旧位置 200？

https://jsfiddle.net/StepBaro/s82rj48q/2/

Answer 4

这是因为你隐藏了div，所以它首先需要显示它然后添加过渡，这就是它需要延迟的原因。