Question

最近，在继续开发Chrome扩展程序时，我注意到从68升级到69导致了一些不良行为。

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

这一切似乎都正常。但是，我也有

transition: width 0.5s, right 0.5s;

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

一个临时解决方法是暂时删除过渡。但我宁愿避免这种情况。我还有其他可能使用的解决方案吗？

谢谢。

Answer 1

如果我正确理解了您的问题，请尝试完全不使用width过渡。如果您需要在页面的特定空间（而不是屏幕的右边框）中显示iframe，则可以将容器包装与overflow: hidden一起使用。

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

Answer 2

JavaScript onLoad

您可以使用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>

从Chrome 68过渡到69的CSS过渡上行为上的奇怪差异

2 个答案:

JavaScript onLoad

CSS动画和延迟