在Internet Explorer 10中重置css转换

时间:2013-03-11 21:14:41

标签: internet-explorer css3 css-transitions internet-explorer-10

在尝试CSS过渡时,我创建了一个小滚动演示,将right css样式从某个负数转换为0,然后在transitionend事件触发时重新启动以获得无限滚动效果。这是我演示的小提琴 - http://jsfiddle.net/XhFdv/

适用于最新的FF,Chrome,Safari(win)和Opera。在IE 10中(在Win 7和Win 8上都进行了测试)事件触发,但是尝试将正确的属性设置回它开始的负数似乎不起作用 - 它在设置后通常保持为0(但不是总是)。

为了让事情变得更有趣,添加console.log()alert()通常足以让它按预期运行。这让我觉得UI层中有一些未完成的东西。我试图在setTimeout(..., 0)中包含更多样式设置,因此渲染可能会赶上,但这似乎没有帮助。

这是IE 10中的错误,还是我在演示脚本中缺少某些内容?

1 个答案:

答案 0 :(得分:1)

alert()有效,因为它会阻止脚本执行。作为次要措施:触发重绘或重排的东西将是下一个最好的事情:

  • 通过类属性更改
  • 切换visibility:hidden/visible
  • 通过样式属性更改
  • 切换visibility:hidden/visible
  • 通过CSSOM添加样式表
  • 通过display:none
  • 隐藏元素
  • 计算offsetWidthoffsetHeight
  • 触发scroll事件
  • 在有问题的元素的兄弟上触发:hover伪类

<强>参考