3

问题

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

一般来说，这没什么大不了的。

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

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

那么有什么问题呢？

这两个调用（据我了解）都是由浏览器在一个处理步骤中呈现的。这导致要么根本没有过渡，要么导致元素的所有更改都被过渡动画 - 包括那些在transition-class 应用于元素之前应用的更改。

解决方案？

我的第一个想法是将第二个电话包含在setTimeout()电话中。

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

有用！setTimeout()现在以某种方式堆叠使用渲染，并且浏览器可以正确完成所有操作。

那么问题是什么？

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

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

更新

请参阅此小提琴进行演示

（记住在测试之间按下重置按钮）。

4

1 回答 1

0

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

$('#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/

于 2013-10-10T20:01:39.623 回答