从 Chrome 68 到 69 的 CSS 转换行为的奇怪差异答案

【问题标题】：Strange difference in behavior on CSS Transition from Chrome 68 to 69从 Chrome 68 到 69 的 CSS 转换行为的奇怪差异
【发布时间】：2018-09-08 12:56:48
【问题描述】：

最近，在继续开发 chrome 扩展时，我注意到从 68 到 69 的更新导致了一些不良行为。

我有一个 iframe，它通过附加一个包含 right: -360px 的类来“最小化”（从而将其推离屏幕），并通过删除该类并具有 right: 0px; 来“最大化”（从而在右侧显示 iframe屏幕）。

这一切似乎都很好。不过我也有

transition: width 0.5s, right 0.5s;

在这些动作发生时提供“滑动动画”。在 Chrome 68 中，这一切都很好（iframe 填充了适当的空间）。但是在 Chrome 69 中，iframe 似乎在过渡之前的“初始点”处呈现，并且只显示了一小部分。它似乎以这种方式工作，因为当我将转换计时器设置得更短时，会显示更多的 iframe。如果我完全删除过渡，则整个 iframe 在单击时会完美显示。

临时解决办法是暂时删除过渡。但我宁愿避免这种情况。我可以使用任何其他潜在的解决方案吗？

谢谢。

【问题讨论】：

如果没有 URL 或完整的代码，很难回答这些问题。你能提供这些吗？
一个minimal reproducible example 会很有帮助，无论如何开发一个通常会为问题提供信息（有时你会发现你突然无法在干净的环境中复制，并意识到问题是' t 你想的地方）
是的，好点 - 最小、完整和可验证的示例 - 这就是我的意思 ;)
Chrome 版本之间莫名其妙的重大变化列表中的一个...
所以我尝试了一个最小、完整且可验证的示例。但是，它似乎只能通过使用 chrome 扩展来重现。并在 iframe 中使用 iframe。

标签： css google-chrome css-transitions

【解决方案1】：

如果我正确理解了您的问题 - 尽量不要在此处使用 width 转换。如果您需要在页面的特定空间（而不是屏幕的右边框）显示该 iframe，您可以使用带有 overflow: hidden 的容器包装器。

请查看：http://jsbin.com/lamejumigu/edit?html,css,output

【讨论】：

【解决方案2】：

JavaScript 加载

您可以在页面加载后使用onLoad 事件加载 iFrame。

<body onload="load-iFrame()">

CSS 动画和延迟

您也可以使用animation-delay 和keyframe animations 而不是过渡。

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: mymove 5s infinite; 
    -webkit-animation-delay: 1s;
    animation: mymove 5s infinite;
    animation-delay: 2s;
	opacity: 0;
}
@-webkit-keyframes mymove {
    from {opacity: 0; right: -360px;}
    to {opacity: 1; right: 0;}
}
@keyframes mymove {	
    from {opacity: 0; right: -360px;}
    to {opacity: 1; right: 0;}
}
</style>
</head>
<body>
<h1>Keyframe Animations</h1>
<p>Replace the block with an iFrame</p>
<div></div>
</body>
</html>

【讨论】：