隐藏后的CSS无限动画未重置（Chrome）

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

这里我有一个CSS关键帧动画的例子(你可以在这个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.

代码将每1.4秒将img缩放到0.75并返回到原始(1)比例。这很好。

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

然后我添加一个简单的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);
        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.

这将在3秒后和3秒内隐藏img元素。当img元素返回到可见时,调整大小效果将不再运行。

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

它发生在Chrome 41.0.2272(Ubuntu)中。在Firefox中它按预期工作。

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

看起来像是Chrome中的错误。我开了一个问题。作为一种解决方法,如建议,使用display:none而不是vissibility:hidden或在设置可变性后添加类:visible

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

编辑2此处打开了一个问题:https://code.google.com/p/chromium/issues/detail?id = 444852

2 个解决方案

#1

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

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

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.

因此,它仍然应该被计算,而不是被绘制。显然,浏览器可能希望节省成本,而不是在可能的情况下进行计算,这似乎是当计算没有重新开始时会出现错误的地方。您可以通过切换显示并将动画元素包装在与元素大小相同的div中来绕过它,以防止布局折叠。否则,您可以通过切换类来重新应用动画CSS,如Jeff所述。

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.

请看JS小提琴显示隐藏的元素仍然清晰地动画:JSFiddle。这让我觉得这是一个错误。否则,下面是它正在切换显示的示例。

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>

#2

I've run into issues with animations stopping their execution before. The solution for me has always been to reapply the animation as a class whenever I want it to restart. I modified your fiddle with this solution:

我遇到了动画停止执行之前的问题。对我来说,解决方案一直是每当我想要重新启动时将动画重新应用为类。我用这个解决方案修改了你的小提琴:

http://jsfiddle.net/q234Lsx8/5/

I made the CSS rule apply to img.bulge, and then the jQuery code removes and adds the class bulge on hide and show.

我将CSS规则应用于img.bulge,然后jQuery代码删除并在hide和show上添加类bulge。

#1