IE10 / IE11“缓退”转换中的错误

Posted 2023-03-06

【中文标题】IE10 / IE11“缓退”转换中的错误

【英文标题】：IE10 / IE11 bug in 'ease back' transitions

【发布时间】：2015-05-29 07:38:19

【问题描述】：

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

缓退效果定义为：

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

总结：随时随地点击文档的任意位置，红色方块应在A和B之间切换位置，具有缓退过渡效果

说明：

第一次打开小提琴时，红色方块在 A 位置 点击，红色方块应该向右平移，但由于 ease-back 过渡缓动，它应该首先进一步平移到“反弹 B”区域，然后返回到“B” 现在尝试在红色方块位于“反弹 B”区域时（在它完成过渡之前）单击。

预期的行为（Chrome、Firefox）是从其当前位置（“反弹 B”区域），红色方块应该反弹回“反弹 A”区域，然后返回到“A”。基本上，这与红色方块从“B”区域开始的效果相同。

但在您喜爱的符合标准且无错误的 Internet Explorer 浏览器中，情况并非如此。当过渡正在进行时（红色方块在“反弹 B”区域），并且我单击，红色方块线性移动到“A”区域，没有缓退效果。

我查阅了 CSS 过渡规范，似乎这不是预期的行为，而且显然不是这样。

我在 IE 11（内部版本 11.0.9600.17633）和 IE 10（内部版本 10.0.9200.17228）中进行了测试。

有谁知道为什么会发生这种情况以及如何解决？

【问题讨论】：

小提琴和解释值得+1

不太确定预期的行为。见w3.org/TR/css3-transitions/transition-reversing-demo

【参考方案1】：

嗯，标准的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 提案） 和您的贝塞尔值。

结果与 IE 结果比其他结果更匹配。 Chrome 和 Firefox 结果匹配无反向调整

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