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

问题描述

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

代码将每1.4秒将img缩放至0.75，然后返回原始比例。

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

  setTimeout（function（）{$（img）。css（'visibility'，'hidden'）; ）.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无限替代; -moz-animation：imagebulger 1.4s无限替代; -o-animation：imagebulger 1.4s无限替代; 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/> 

这将在3之后隐藏img元素秒和3秒。 当img元素恢复为可见时，调整大小的效果将不再运行。

Chrome 41.0.2272 （Ubuntu）。

b $ b

看起来像是Chrome中的错误。我打开了一个问题。作为解决方法，像建议，使用 display：none 而不是 vissibility：hidden code> vissibility：visible

EDIT 2
这里有一个问题： https://code.google.com/p/chromium/issues/detail ？id = 444852

解决方案

这似乎是一个错误。 W3文档表明隐藏的可见性具有以下效果： / p>

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

未绘制。显然，浏览器可能想要节省并且不是在可能的情况下计算它，这似乎是当该计算在其应该的时候不重新开始时出现的错误。你可以通过切换显示并包装你的animating元素在一个与该元素相同大小的div，以防止布局折叠。

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

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

  .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无限替代; -moz-animation：imagebulger 1.4s无限替代; -o-animation：imagebulger 1.4s无限替代; 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>  

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屋！