IE10 / IE11 错误在'ease back'转换



我设置了一个带有以下问题的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"。基本上,它的效果与红色方块从"B"区域开始的效果相同。

但在您喜爱的符合标准的Internet Explorer浏览器中,情况并非如此。当转换正在进行时(红色方块在"反弹B"区域),我单击时,红色方块线性移动到"A"区域,没有减缓后退效果。

我查阅了CSS Transitions规范,发现这似乎不是预期的行为,而且很明显感觉不是

我在IE 11(版本11.0.9600.17633)和IE 10(版本10.0.9210.17228)中进行了测试。

有人知道为什么会发生这种情况以及如何解决吗?

好吧,标准规范说

3.1.自动反转中断的转换

许多常见的过渡效果都涉及到状态,例如当鼠标指针移动到用户界面元素上,然后再移出该元素要素有了这些效果,运行过渡到在完成之前被中断,并且属性重置为转换的起始值。一个例子是元素,当指针进入元素,然后指针在效果出现之前退出该元素已完成。如果传出和传入转换是使用它们指定的持续时间和计时功能,以及由此产生的效果可能是分散注意力的不对称,因为第二次转换需要移动缩短距离的全部指定时间。相反预期的行为是第二个过渡更短。

为了满足这一期望,当开始对属性进行转换时在具有当前正在运行的转换,其反向调整的起始值为与新过渡的最终值相同(此后,旧过渡转换),实现必须取消到的旧转换链接定义,并按如下方式调整新的转换(之前遵循用于计算组合的持续时间、开始时间等的规则,和结束时间):

相反,新转换的反向调整起始值旧转换的结束值。注:这代表转换的逻辑启动状态,并允许一些计算忽略在达到该状态之前开始的转换,这反过来又允许重复逆转相同的工作转换正确地新过渡的反向缩短因素是绝对值,钳制在[0,1]的范围内,为:在风格变化事件,旧时代的反转缩短因素转换1减去旧的反向缩短因子过渡注:这表示反向调整旧的起始值和结束值转换已经遍历(以值的数量,而不是时间),除了使用绝对值和箝位来处理定时功能y1或y2在范围[0,1]之外。匹配新转换的转换持续时间乘以反转缩短因子。如果新的转换是负的,它也乘以反转缩短因子。请注意,这些规则并没有完全解决涉及两个以上状态的转换模式的问题。

请注意,这些规则导致了新的正在使用的转换,而不是跳到时间的中间函数,可以产生刺耳的效果。

这是工作组。请看演示其中一些的倒车演示,导致工作组于2013-06-07做出决议并进行编辑2013年11月11日制作。

如果我说我完全理解这一点,那将是我的谎言

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

更容易检查:转到w3c演示,选择2013-06-07反转规范文本(苹果提案)和您的bezier值。

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

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

最新更新