logo标签列表

在Internet Explorer 10中重置CSS过渡效果

internet-explorercsscss-transitionsinternet-explorer-10
5
在尝试使用CSS过渡效果时，我创建了一个小的滚动演示，将right CSS样式从一些负数转换为0，然后在transitionend事件触发时重新启动，以获得无限滚动效果。这是我的演示Fiddle - http://jsfiddle.net/XhFdv/ 这在最新的FF、Chrome、Safari（win）和Opera中都可以工作。在IE 10中（在Win 7和Win 8上测试），事件被触发，但尝试将right属性设置回它开始的负数似乎不起作用 - 它经常保持在0之后被设置（但不总是）。
为了让事情更有趣，添加console.log()或alert()通常足以使其按预期运行。这让我觉得UI层还有未完成的东西。我试图在setTimeout(..., 0)中包装更多的样式设置，以便渲染能够追赶上来，但似乎没有帮助。
这是IE 10的一个bug，还是我在演示脚本中漏掉了什么？
我之前见过这些类型的错误，它们肯定很烦人。通常超时会起作用，但在这种情况下不起作用。明天我有时间试试，然后再联系你；非常奇怪！ - Graham Robertson
我已经将 setTimeout 的延迟增加到了 10-20 毫秒，现在它对我来说完美运作。 - GL.awog
2
我几个月前向微软报告了一个漏洞。我相信他们已经能够重现这个问题，并将其作为下一个主要版本中修复的候选漏洞。不幸的是，它没有出现在IE 11中。 - mld
1个回答
1

alert()的工作原理是阻止脚本执行。作为一种辅助措施：触发重绘或回流的方法是下一个最好的选择：

  • 通过类属性更改切换visibility:hidden/visible
  • 通过样式属性更改切换visibility:hidden/visible
  • 通过CSSOM添加样式表
  • 通过display:none隐藏元素
  • 计算offsetWidth或offsetHeight
  • 触发scroll事件
  • 在相关元素的兄弟节点上触发:hover伪类

参考资料

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接