堆叠对 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() 渲染现在以某种方式堆叠，浏览器可以正确完成所有操作。

那么问题出在哪里呢？

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

那么，这是唯一的方法吗？或者有没有更干净的方法来解决这个问题？

更新

请参阅此小提琴以进行演示

(请记住在测试之间按下重置按钮(。

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/