隐藏后的CSS无限动画不会重置（Chrome） [英] CSS infinite animation after hidden is not reset (Chrome)

问题描述

这里有一个CSS关键帧动画的例子（你可以在 this演示 ）

代码将每1.4秒将img缩放到0.75并回到原来的（1）缩放比例。这很好。

然后我添加一个简单的jQuery代码来模拟错误：

setTimeout（function（）{$（img）.css（'visibility'，'hidden'）; activate（）;}，3000）; function activate（）{setTimeout（function（）{$（img ）.css（'visibility'，'visible'）;}，3000）;}

  @  -  webkit-keyframes imagebulger {to {-webkit-transform：scale（.75）;变换：缩放（.75）; }} @ keyframes imagebulger {to {-webkit-transform：scale（.75）;变换：缩放（.75）; }} img {-webkit-animation：imagebulger 1.4s无限替代; -moz-animation：imagebulger 1.4s无限备用; -o-animation：imagebulger 1.4s无限备用; animation：imagebulger 1.4s infinite alternate;}  

<脚本src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< img src =http://placehold.it/ 200x200/>

秒和3秒钟。 当img元素回到可见状态时，调整大小效果将不再运行。

Chrome 41.0.2272发生在我身上（Ubuntu的）。在Firefox中，它可以正常工作。

---

编辑 b $ b

看起来像是Chrome中的错误。我开了一个问题。作为一种解决方法，可以使用 display：none 而不是 vissibility：hidden 或者在设置 vissibility：visible

编辑2
这里打开了一个问题： https://code.google.com/p/chromium/issues/detail ？id = 444852

解决方案

它似乎是一个错误。 W3文档建议隐藏可视性具有以下效果：

生成的框是不可见的（完全透明，没有绘制），但仍然影响布局。此外，如果元素的后代具有'visibility：visible'，则该元素的后代将可见。

因此它仍然应该被计算，只是未画出。很明显，浏览器可能会希望节省成本，而不是在可能的情况下计算它，这似乎是当计算不应该重新开始时出现错误的地方。您可以通过切换显示并将您的动画元素封装在与元素大小相同的div中以避免布局崩溃。否则，您可以通过切换Jeff的状态来重新应用动画CSS。

请参阅JS小提琴，其中隐藏的元素仍然清晰地显示为动画： JSFiddle 。这导致我认为这是一个错误。否则，下面是切换 display 的示例。

setTimeout ）{$（img）。hide（）; activate（）;}，3000）; function activate（）{setTimeout（function（）{$（img）。show（）;}，3000）;}

.image-wrap {height：200px; width：200px;} @ - webkit-keyframes imagebulger {to {-webkit-transform：scale（.75）;变换：缩放（.75）; }} @ keyframes imagebulger {to {-webkit-transform：scale（.75）;变换：缩放（.75）; }} img {-webkit-animation：imagebulger 1.4s无限替代; -moz-animation：imagebulger 1.4s无限备用; -o-animation：imagebulger 1.4s无限备用; animation：imagebulger 1.4s infinite alternate;}

<脚本src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>< div class =image-wrap> < img src =http://placehold.it/200x200/>< / div>

Here I have an example of CSS keyframe animation (You can see the whole thing on this Demo)

The code will every 1.4 seconds scale the img to 0.75 and go back to it's original (1) scale. That works fine.

Then I add a simple jQuery code to simulate the error:

setTimeout(function () {
    $("img").css('visibility', 'hidden');
    activate();
}, 3000);

function activate() {
    setTimeout(function () {
        $("img").css('visibility', 'visible');
    }, 3000);
}

@-webkit-keyframes imagebulger {
    to {
        -webkit-transform: scale(.75);
        transform: scale(.75);
    }
}
@keyframes imagebulger {
    to {
        -webkit-transform: scale(.75);
        transform: scale(.75);
    }
}
img {
    -webkit-animation: imagebulger 1.4s infinite alternate;
    -moz-animation: imagebulger 1.4s infinite alternate;
    -o-animation: imagebulger 1.4s infinite alternate;
    animation: imagebulger 1.4s infinite alternate;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/200x200" />

This will hide the img element after 3 seconds and during 3 seconds. When the img element is back to to visible, the resizing effect will not be running anymore.

It happens to me in Chrome 41.0.2272 (Ubuntu). In Firefox it works as expected.

---

EDIT

Looks like is bug in with Chrome. I opened an issue. As a workaround, like suggested, either use display:none instead of vissibility:hidden or add a class after setting vissibility:visible

EDIT 2 There is an issue opened here: https://code.google.com/p/chromium/issues/detail?id=444852

解决方案

It appears to be a bug. The W3 documentation suggests that visibility hidden have the following effect:

The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.

Hence it should still be being calculated, just not drawn. Obviously the browser will probably want to make savings and not calculate it where possible, which seems to be where the bug is arising when this calculation doesn't recommence when it should. You can get around it by toggling the display and wrapping your animating element in a div of the same size as the element in order to prevent the layout collapsing. Otherwise you could just reapply the animation CSS by toggling the class as Jeff states.

Please see the JS fiddle showing a hidden element still clearly being animated: JSFiddle. This leads me to think it's a bug. Otherwise the below is an example of it working toggling display.

setTimeout(function () {
    $("img").hide();
    activate();
}, 3000);

function activate() {
    setTimeout(function () {
        $("img").show();
    }, 3000);
}

.image-wrap {
    height: 200px;
    width: 200px;
}

@-webkit-keyframes imagebulger {
    to {
        -webkit-transform: scale(.75);
        transform: scale(.75);
    }
}
@keyframes imagebulger {
    to {
        -webkit-transform: scale(.75);
        transform: scale(.75);
    }
}
img {
    -webkit-animation: imagebulger 1.4s infinite alternate;
    -moz-animation: imagebulger 1.4s infinite alternate;
    -o-animation: imagebulger 1.4s infinite alternate;
    animation: imagebulger 1.4s infinite alternate;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="image-wrap">
    <img src="http://placehold.it/200x200" />
</div>

这篇关于隐藏后的CSS无限动画不会重置（Chrome）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！