Question

这里我有一个CSS关键帧动画的例子（你可以在this Demo上看到整个事物）

代码将每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);
        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" />

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

我在Chrome 41.0.2272（Ubuntu）中遇到过这种情况。在Firefox中它按预期工作。

修改

看起来像是Chrome中的错误。我开了一个问题。作为一种解决方法，与建议一样，使用display:none代替vissibility:hidden或在设置vissibility:visible后添加课程

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

Answer 1

这似乎是一个错误。 W3 documentation表示隐藏的可见性具有以下效果：

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

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

请看JS小提琴，显示隐藏的元素仍然明显是动画的：JSFiddle。这让我觉得这是一个错误。否则，以下是切换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>

Answer 2

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

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

我将CSS规则应用于feature.get('name')，然后jQuery代码删除并在隐藏和显示上添加类img.bulge。

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

2 个答案: