3

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

该项目是一个单页移动网络应用程序，上面有几个按钮。我正在使用 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' });
});
4

5 回答 5

2

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

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

$('#SomeDiv').addClass('MyAnimation').show();
$('#SomeDiv').hide().removeClass('MyAnimation');
于 2012-08-06T13:25:52.170 回答
1

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

于 2012-08-06T13:47:38.253 回答
0

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

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

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

于 2012-08-06T13:32:28.483 回答
0

我找到了一个可以解决这个特定问题的解决方案，尽管我不是很喜欢它。在 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' });
});

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

于 2012-08-06T15:06:05.970 回答
0

在 CSS 中：

.hidden .myAnimation {
   /* Will reset and prevent your animation
      from running when the element is hidden. */
   animation: none;
}
于 2018-04-11T08:37:41.897 回答