Question

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

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

Answer 1

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

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

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

Answer 2

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

Answer 3

我想如果用于隐藏当前页面的动画等待按钮的动画完成，则可以解决您的问题。所以你必须在按钮动画的“on complete”回调中触发页面动画：

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

在此测试：http://jsfiddle.net/Y5HSU/

Answer 4

我找到了一个适用于这个特定问题的解决方案，尽管我并不是非常喜欢它。将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' });
});

这个问题的主要问题是如果浏览器在执行动画时特别慢，并且超时会过早地关闭动画。

Answer 5

在CSS中：

Private Sub ComboBox1_DropButtonClick()

Sheet1.Range("A1").Value = Me.ComboBox1.Column(0) & " " & 

Me.ComboBox1.Column(1)

End Sub

隐藏元素时CSS动画暂停

5 个答案: