Question

在我的html5游戏中，我正在播放一些css3关键帧动画。在动画期间，用户可以按下暂停按钮，该按钮设置div容器（包含播放动画的子项）以显示：none。回到游戏玩法并将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');
};

显示无和块强化Webkit中的CSS3 KeyframeAnimation

解决方案

1 个答案: