Question

我发现了一些行为，这似乎很奇怪，对我的理解，jQuery.css（）是如何工作的。我知道，它不是可以排队的，但是在下面的小提琴中，当我连续应用2个css方法时 - 但不是在一个队列中，它表现不同，通过setTimeout应用它们延迟1ms。

结果是，一个框淡入，但另一个框立即变为不透明度1.

请有人澄清。

var fadingBox = $("<div></div>")
  .css({
    "opacity": "0"
  })
  .appendTo("#cont");


setTimeout(function() {
  fadingBox.css({
    "background": "red",
    "opacity": "1"
  });
}, 1);


var notFadingBox = $("<div></div>")
  .css({
    "background": "red",
    "opacity": "0"
  })
  .appendTo("#cont");


notFadingBox.css("opacity", "1");

div {
  -webkit-transition: opacity 2s;
  -moz-transition: opacity 2s;
  -ms-transition: opacity 2s;
  -o-transition: opacity 2s;
  transition: opacity 2s;
  height: 50px;
  width: 50px;
}

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

https://jsfiddle.net/Lukis/0mbz7e9x/35/

编辑：更新了jsFiddle，之前错了。

Answer 1

浏览器的布局引擎无法区分元素的开始状态和结束状态，因为在它看来，开始状态（opacity: 0）和结束状态（opacity: 1）都是如此是在同一时间设定的。

为了让布局引擎理解应该存在分离，您需要在开始和结束之间造成中断。不幸的是，据我所知，没有一个合法的或者好的＆＃34;这样做的方法，所以你需要使用一种解决方法。

setTimeout是强制分离的一种方法，这就是你的第一个例子有效的原因。

（这种方法通常被误解，所以我觉得重要的是要澄清这不起作用，因为你给了浏览器时间＆＃34;，而是因为{{1}然后创建一个排队的回调。然后单独执行此回调，绕过同时设置两个状态的初始问题。）

请参阅下面的示例，其中我将超时设置为setTimeout并仍然得到正确的转换：

＆＃13;

var $fadingBox= $("<div></div>")
    .css({"background" : "red","opacity": "0"})
    .appendTo("#cont");

setTimeout(function(){
    $fadingBox.css("opacity", "1");
}, 0);

＆＃13;

#cont div {
  transition: 2s opacity;
  padding: 100px;
}

＆＃13;

某些功能还会导致布局引擎中断/刷新，但我并不总是依赖于这些工作，因为您正在利用可能在将来优化中删除的内容。

例如，您可以利用元素的<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="cont"></div>属性，其getter函数会使布局引擎暂停＆＃34;

;

＆＃13;

offsetHeight

＆＃13;

var $fadingBox = $("div");
$fadingBox.css("opacity", "0");
$fadingBox[0].offsetHeight;      //LAYOUT ENGINE REFRESH
$fadingBox.css("opacity", "1");

＆＃13;

div {
  background: red;
  transition: 2s opacity;
  padding: 100px;
}

＆＃13;

jQuery排队css方法

1 个答案: