相关疑难解决方法(0)

我正在构建基于CSS3过渡的非jQuery响应式图像滑块.

结构很简单:视口和内部相对定位的UL,左浮动LI.

在这种情况下我遇到了一个问题:

1. 用户点击"上一步"箭头.
2. JS在当前显示的LI节点之前附加适当的LI.
3. 目前,UL已设置CSS转换none 0s linear以防止动画更改.在这一刻,我通过滑块宽度减去UL CSS左值(比方说:从0px到-1200px),使视图与原来相同.
4. 现在我正在将UL的过渡属性更改为all 0.2s ease-out.
5. 现在我正在改变UL的左侧属性以触发CSS3动画.(比方说:从-1200px到0px).

问题是什么？浏览器简化了更改,不会制作任何动画.

斯托扬斯特凡在他的博客中写了一篇关于回流的问题在这里,但在这种情况下,试图迫使元件上的回流不起作用.

这是一段代码(为了简化,我跳过了浏览器前缀):

ul.style.transition = 'none 0s linear 0s'; ul.style.left = '-600px'; ul.style.transition = 'all 0.2s ease-out'; ul.style.left = '0px';

这里有一个小问题,看看行动中的问题:http://jsfiddle.net/9WX5b/1/

我很惊讶在基于jQuery的CSS属性更改后通过jQuery应用的CSS3转换规则实际上动画了此属性更改.请看http://jsfiddle.net/zwatf/3/:

最初,div由两个类设置样式,并且由于这两个类的默认CSS属性而具有一定的高度(200px).然后通过删除一个类使用jQuery修改高度:

$('.container').removeClass('active');

这将高度从200px降低到15px.

之后,通过添加类将转换规则应用于容器:

$('.container').addClass('all-transition');

发生的事情是高度的降低变得生动(至少在Firefox和Chrome上).在我的世界中,如果指令的顺序有任何意义,这不应该发生.

我想这种行为可以很好地解释.为什么会这样？我该怎样预防呢？

这就是我想要实现的目标:

1. 用jQuery修改默认样式(不是通过CSS3过渡动画!)
2. 使用jQuery应用转换规则
3. 使用jQuery更改属性(通过CSS3过渡动画)

(1)和(2)应该尽快发生,所以我不喜欢任意延迟.

我有一个使用Javascript构建UI的库,由于涉及动态内容,我有时希望将内容放到浏览器中,检查布局是如何更改以支持这一点,然后根据结果执行不同的逻辑.例如:检测某些文本是否溢出并使用省略号截断它.

通常我通过发出更改来实现它,然后使用window.setTimeout(0)来等待布局更新并调用其余的逻辑.这显然是次优的,因为不同的浏览器可能实现的最小超时太慢而不能防止使用大量CPU的闪烁或更快.

理想情况下,我想进行DOM更改,然后强制布局同步更新并立即内联运行"修复"逻辑.有任何想法吗？