我设置了一个问题jsFiddle:https://jsfiddle.net/kLqv86t2/7/
缓和效果定义如下:
transition-timing-function: cubic-bezier(0.15, 0.85, 0.30, 2.00);
摘要:随时点击文档中的任意位置,红色方块应切换它在A和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)中测试过。
有谁知道为什么会这样,以及如何解决?
答案 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粉丝! : - )