最近，在继续研究chrome扩展时，我注意到从68到69的更新导致了一些不良行为。
我通过附加一个包含right: -360px的类（因此将其推离屏幕）来“最小化”iframe，并通过删除该类并使用right: 0px;（因此在屏幕右侧显示iframe）来“最大化”。
这一切似乎都很好。不过，我也有
transition: width 0.5s, right 0.5s;
在这些动作发生时提供“滑动动画”。在Chrome 68中，这一切都运行良好（iframe填充了适当的空间）。但是在Chrome 69中，iframe似乎在转换之前的“初始点”呈现，并且只显示了一小部分。它似乎以这种方式工作，因为当我将转换计时器设置得更短时，会显示更多的iframe。如果我完全删除了转换，则点击后完整显示整个iframe。
暂时解决方法是暂时删除转换。但我宁愿避免这种情况。我可以使用其他任何可能的解决方案吗？
谢谢。
如果我正确理解了你的问题 - 尽量不要在这里使用width过渡。如果您需要在页面的某个空间（而不是在屏幕的右边界）显示iframe，您可以使用带有overflow: hidden的容器包装器。
您可以在使用onLoad事件加载页面后加载iFrame。
<body onload="load-iFrame()">
你也可以使用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>