Question

问题

我想使用javascript定位一个元素，然后为它添加一个transition-appliance类，这样在定位之后，任何进一步的更改都会被该过渡动画化。

一般来说这不是什么大问题。

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

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

在javascript中堆叠对元素的更改，以实现完美呈现的CSS3过渡

1 个答案: