Question

下面是一个人为的例子，我在页面上附加了两个元素。第一个盒子有一个装饰类立即给它。第二个框具有在经过1ms的setTimeout后给定的类。

在我的例子中，我似乎总是看到第二个框转换。但是，在我的大型应用程序中，我很少看到一个没有过渡的元素。当我尝试重现问题时，元素转换为OK，但是，稍后在许多成功转换之后，我看到它再次出现而没有转换。

我想知道是否保证setTimeout修复工作正常。我的问题是竞争条件，还是其他地方的问题？

$('#runExample').click(function() {
  $('.example').remove();
  var example = $('<div>', {
    'class': 'example'
  });

  $('body').append(example);
  example.addClass('is-colorful');

  var example2 = $('<div>', {
    'class': 'example'
  });

  $('body').append(example2);

  setTimeout(function() {
    example2.addClass('is-colorful');
  }, 1);
});

.example {
  width: 200px;
  height: 200px;
  background-color: red;
  transition: background-color 2s;
  display: inline-block;
  margin: 0 10px;
}
.example.is-colorful {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='runExample'>
  Run Example
</button>

Answer 1

我认为更正确的解决方案是依赖window.requestAnimationFrame而不是window.setTimeout。虽然setTimeout在我的设计示例中起作用，但它并不保证已经发生了回流。这正是requestAnimationFrame的设计目的！

＆＃13;

$('#runExample').click(function() {
  $('.example').remove();
  var example = $('<div>', {
    'class': 'example'
  });

  $('body').append(example);
  example.addClass('is-colorful');

  var example2 = $('<div>', {
    'class': 'example'
  });

  $('body').append(example2);

  requestAnimationFrame(function() {
    example2.addClass('is-colorful');
  }, 1);
});

＆＃13;

.example {
  width: 200px;
  height: 200px;
  background-color: red;
  transition: background-color 2s;
  display: inline-block;
  margin: 0 10px;
}
.example.is-colorful {
  background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='runExample'>
  Run Example
</button>

＆＃13;

添加到DOM时的Transition元素;是setTimeout保证每次都能工作吗？

1 个答案: