隐藏元素时CSS动画暂停答案

【问题标题】：CSS Animation pausing when element is hidden隐藏元素时CSS动画暂停
【发布时间】：2018-04-11 16:37:41
【问题描述】：

我正在为我正在处理的项目的按钮添加点击/触摸动画，但我遇到了一个令人沮丧的问题，即为显示和隐藏元素的按钮设置动画。

该项目是一个单页移动网络应用程序，上面有几个按钮。我正在使用 jQuery 在按下按钮时在按钮上设置 css 关键帧动画。该按钮隐藏当前页面，并显示一个新页面。问题是，当我单击按钮时，页面会在动画完成之前更改，并且在隐藏容器时动画会暂停。当容器重新显示时，动画从它隐藏的地方继续，然后触发 webkitAnimationEnd 事件。

容器显示和隐藏：

display: none;

我无法将其更改为：

visibility: hidden;

因为容器仍然会占用空间。有什么简单的方法可以在元素变得不可见时强制删除动画，或者在隐藏容器时强制动画继续？

编辑：为澄清起见，这是我在 javscript 中应用的关键帧动画：

@-webkit-keyframes shrink
{
    0%
    {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    }
    50%
    {
        -webkit-transform: matrix(0.95, 0, 0, 0.95, 0, 0);
    }
    100%
    {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    }
}

这是我必须将动画应用于元素的 javascript：

$('body').on(_context.settings.platformInfo.device.touch ? 'touchstart' : 'mousedown', '.shrink', function ()
{
    var $item = $(this);

    $item.one('webkitAnimationEnd', function ()
    {
        $item.css({ '-webkit-animation': 'none' });
    }).css({ '-webkit-animation': 'shrink 250ms forwards' });
});

【问题讨论】：

标签： javascript mobile webkit css-animations

【解决方案1】：

您可以将动画的 CSS 定义放在一个单独的类中，并根据可见性添加或删除这个额外的类：

#SomeDiv{ .... }
.MyAnimation{ .... }

$('#SomeDiv').addClass('MyAnimation').show();
$('#SomeDiv').hide().removeClass('MyAnimation');

【讨论】：

【解决方案2】：

您可以尝试设置visibility: hidden;，但也可以将元素绝对定位在屏幕外，例如position: absolute; left: -500px; /* Or whatever it takes */。事实上，您甚至可能不需要设置visibility。不过感觉有点hacky。

【讨论】：

不幸的是，这需要更改项目的大部分内容。其他人一直在和我一起工作，我不确定人们是否会对我为微妙的按钮动画进行类似的更改感到满意。从我在其他地方读到的内容来看，这似乎是最常见的解决方案。对于其他为此苦苦挣扎的人，您可以执行上述操作，但使用 float: left;在容器上使它们堆叠，然后使用溢出隐藏来强制页面正确流动。

【解决方案3】：

如果隐藏当前页面的动画只是等到按钮的动画完成，我想你的问题可能会得到解决。所以你必须在按钮动画的“完成”回调中触发页面动画：

$("#button").click(function(){
    $(this).animate({
        //animation parameters
    }, 1000, function() {
        //button animation complete, change pages
    });
});

在这里测试：http://jsfiddle.net/Y5HSU/

【讨论】：

我不能这样做，因为它会让应用程序的导航感觉很慢。不过感谢您的建议！
我认为他是在谈论 CSS 动画，而不是用 jquery 的 animate 为 CSS 属性设置动画。
是的，我说的是 CSS 关键帧动画。我已经修改了原始问题以反映这一点。

【解决方案4】：

我找到了一个可以解决这个特定问题的解决方案，尽管我并不非常喜欢它。在 mix 中添加 setTimeout 意味着即使容器被隐藏，动画也会在 250ms 后被移除（在这种情况下）。

$('body').on(_context.settings.platformInfo.device.touch ? 'touchstart' : 'mousedown', '.shrink', function ()
{
    var $item = $(this);

    setTimeout(function ()
    {
        $item.css({ '-webkit-animation': 'none' });
    }, 250);

    $item.css({ '-webkit-animation': 'shrink 250ms forwards' });
});

这样做的主要问题是，如果浏览器在执行动画时特别慢，并且超时触发太快会切断动画。

【讨论】：

【解决方案5】：

在 CSS 中：

.hidden .myAnimation {
   /* Will reset and prevent your animation
      from running when the element is hidden. */
   animation: none;
}

【讨论】：