javascript - 类在风格之前改变

Question

请参阅以下代码段:

$('div').click(function(){
  $(this).css('width', '10px').addClass('wide');
});

div {width: 100px; height: 100px; background-color: green;}
div.wide {width: 200px !important; transition: width 2s;}

<div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

我希望首先应用样式，使其宽 10 像素，然后添加类使其扩展到 200 像素。然而事实并非如此。如果您查看检查器，您可以看到类属性在样式属性之前被更改。为什么会这样，我怎样才能让它以正确的方式工作？

谢谢!

Answer 1

在添加类(class)之前尝试稍等片刻，您永远看不到两者之间的时间差异您的计算机太快了。

最后，这是一个更多关于 javascript 是异步的方式并且不在每个命令之间呈现 DOM 的问题。将超时设置在那里告诉 javascript 它现在可以做其他事情并将上下文切换到渲染。

$('div').click(function(){
  $(this).css('width', '10px');
  var smallBox = this;
  setTimeout(function(){
      $(smallBox).addClass('wide');
  }, 0);
});

div {width: 100px; height: 100px; background-color: green;}
div.wide {width: 200px !important; transition: width 2s;}

<div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>