javascript - 堆叠对 javascript 中元素的更改以实现完美渲染的 CSS3 过渡

Question

问题

我想使用 javascript 定位一个元素，然后向其添加一个过渡设备类，以便在定位之后，任何进一步的更改都将通过该过渡动画。

通常这不是什么大问题。

但为了实现它，我发现自己编写了这样的代码:

$('#someWindow').center('#someParent');
$('#someWindow').addClass('transition visible');

那么有什么收获呢？

这两个调用(据我所知)都是由浏览器在一个处理步骤中呈现的。这会导致根本没有过渡，或者导致元素的所有更改都被过渡动画化 - 包括那些在 transition 类应用于元素之前应用的更改。

解决方案？

我的第一个想法是将第二个调用包装在 setTimeout() 调用中。

$('#someWindow').center('#someParent');
window.setTimeout(function(){
    $('#someWindow').addClass('transition visible');
},1);

有效!使用 setTimeout() 渲染现在以某种方式堆叠并且浏览器正确地完成了这一切。

那么问题是什么？

我认为这是一个已知问题。我的解决方案并不令我满意。它“感觉”不一致，好像我不能完全依赖它。

那么，这是唯一的方法吗？ 或者是否有更简洁的方法来解决该问题？

更新

See this fiddle for a demonstration

(记得在测试之间按下重置按钮)。

Answer 1

因为您的问题与重绘/重绘有关。
这个怎么样

$('#el').css({
    top: '150px'
})
.redraw()
.addClass('transition visible');

$.fn.redraw = function(){
  $(this).each(function(){
    var redraw = this.offsetHeight;
  });
  return this;
};

http://jsfiddle.net/nCe6n/6/