css - Display None 和 Block 强化了 Webkit 中的 CSS3 KeyframeAnimation

Question

在我的 html5 游戏中，我正在播放一些 css3 关键帧动画。在动画播放期间，用户可以按下暂停按钮，这会将 div 容器(包含播放动画的子项)设置为显示:无。回到游戏并将 div 设置为 display:block 后，关键帧动画被迫在 Chrome 和 Safari 中重播。它在 Firefox 中运行良好!

我创建了一个 jsfiddle 来显示问题 http://jsfiddle.net/rrDsN/ .在 Firefox 中，元素继续旋转，在 Chrome 和 Safari 中，它会重播。

我尝试使用 visibility:hidden, opacity:0 代替，但后来我遇到了可点击元素的问题(由于不透明度)并且可见性在 div 元素中不是递归的。

我怎样才能防止动画在 webkit 浏览器中重播或者显示的替代方法是什么？

解决方案

它是 zIndex 和 Opacity 的组合:旧代码:

if(visible) {
            this.domEl.style.display='block';
        } else {
            this.domEl.style.display='none';
        }

新代码:

if(visible) {
        this.domEl.style.zIndex=(this.prevZIndex==undefined?0:this.prevZIndex);
        this.domEl.style.opacity=1;
        console.log(this.name+" "+this.domEl.style.zIndex);
    } else {
        this.prevZIndex=this.domEl.style.zIndex;
        this.domEl.style.opacity=0;
        this.domEl.style.zIndex=-10;
    }
}

Answer 1

按 position: absolute 隐藏，坐标不可见 (fiddle):

document.getElementById('rotate').onmouseover = function(){
    this.style.cssText = 'position: absolute; top: -9999px;left: -9999px;';
};

document.getElementById('rotate').onmouseout = function(){
    this.removeAttribute('style');
};