IE10 / IE11在'缓和'过渡中的错误

时间:2015-03-25 14:48:59

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

我设置了一个问题jsFiddle:https://jsfiddle.net/kLqv86t2/7/

缓和效果定义如下:

transition-timing-function: cubic-bezier(0.15, 0.85, 0.30, 2.00);

摘要:随时点击文档中的任意位置,红色方块应切换它在A和B之间的位置,并具有易于过渡的过渡效果

说明:

  • 第一次打开小提琴时,红色方块处于A位置
  • 点击并且红色正方形应该向右平移,但由于缓和过渡缓和,它应该首先进一步转换为反弹B'区域,然后返回' B'
  • 现在尝试点击红色方块在弹跳B'区域(在完成转换之前)。

预期的行为(Chrome,Firefox)是从它的当前位置('反弹B'区域)开始,红色方块应该反弹回“A'反弹A' ;区域然后返回' A'。基本上,它与红色正方形从“B&B”开始的效果相同。区。

但是在您的心爱标准兼容的无错误 Internet Explorer浏览器中,情况并非如此。当转换正在进行时(红色方块位于'反弹B'区域),然后我点击,红色方块线性移动到' A'区域,没有缓和效果。

我查看了CSS Transitions规范,看起来这不是预期的行为,显然它并不是这样的。

我在IE 11(build 11.0.9600.17633)和IE 10(build 10.0.9200.17228)中测试过。

有谁知道为什么会这样,以及如何解决?

1 个答案:

答案 0 :(得分:2)

嗯,标准specification

  

3.1。自动反转中断的过渡

     

许多常见的过渡效果涉及两者之间的过渡   状态,例如鼠标指针发生的转换   移动到用户界面元素上,然后移出该用户界面元素   元件。通过这些效果,运行过渡通常是常见的   在完成之前被中断,并且属性重置为   该过渡的起始价值。一个例子是悬停效果   元素,当指针进入时转换开始   元素,然后指针在效果之前退出元素   完成。如果使用执行传出和传入转换   他们指定的持续时间和计时功能,产生的效果   可能会分散注意力,因为第二次过渡需要   移动缩短距离的完整指定时间。相反,   预期的行为是第二​​次转变更短。

     

为了满足这种期望,在为物业开始转换时   在一个元素(以下称为新的转换)上有一个   当前正在运行的转换,其反转调整的起始值为   与新过渡的最终价值相同(此后,旧的过渡期)   转换),实现必须取消旧的过渡链接   上面的定义并调整新的过渡如下(之前   遵循计算组合持续时间,开始时间的规则,   和结束时间):

     

相反,新转换的反转调整的起始值是   旧过渡的最终价值。注意:这代表了   转换的逻辑起始状态,并允许一些计算   忽略转换在达到该状态之前开始,   这反过来允许同一过渡的重复逆转起作用   正确。新过渡的逆转缩短因素是   绝对值,钳位到[0,1]的总和:   输出时的旧转换的定时功能   风格变化事件,倍变旧的逆转缩短因素   过渡1减去旧的逆转缩短因子   过渡。注意:这代表了之间空间的一部分   反转调整的起始值和旧的结束值   转换已经遍历(除了价值,而不是时间)   具有绝对值和钳位来处理定时功能   y1或y2超出范围[0,1]。匹配   新转换的转换持续时间乘以   扭转缩短因子。如果匹配的转换延迟为   新的转变是负面的,它也乘以逆转   缩短因子。请注意,这些规则并未完全解决   涉及两个以上州的过渡模式的问题。

     

请注意,这些规则会导致新的整个计时功能   转换正在使用,而不是跳到计时的中间   功能,可以产生刺耳的效果。

     

这是被考虑的几种可能性之一   工作小组。查看演示其中一些演示的倒车演示,   导致在2013-06-07进行的工作组决议和编辑   于2013-11-11制作。

如果我说我完全明白这一点,这将是我的谎言

但是,我认为标准所说的内容更符合IE结果,而不适合Chrome或Firefox结果。

更容易检查:转到w3c demo并选择 2013-06-07关于撤消的规范文本(Apple提案)以及您的bezier值。

结果与IE结果的匹配程度远高于其他结果。 Chrome和Firefox结果匹配无逆转调整

免责声明我不是IE粉丝! : - )