I'm working on adding click/touch animations to buttons on a project I'm working on, and I've e across a frustrating problem concerning animating buttons which show and hide elements.

The project is a single page mobile web app with a handful of buttons on it. I'm using jQuery to set a css keyframe animation on a button when it's pressed. The button hides the current page, and shows a new one. The problem is, when I click the button, the page changes before the animation is plete, and the animation is paused whilst the container is hidden. When the container is re-shown, the animation continues from where it was hidden, then the webkitAnimationEnd event triggers.

The containers are shown and hidden with:

display: none;

I can't change this to:

visibility: hidden;

because the container will still take up space. Are there any simple ways I can force the animation to be removed when the element bees invisible, or force the animation to continue when the container is hidden?

Edit: For clarification, this is the keyframe animation I'm applying in the 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);
    }
}

And this is the javascript I've got to apply the animation to the element:

$('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' });
});

I'm working on adding click/touch animations to buttons on a project I'm working on, and I've e across a frustrating problem concerning animating buttons which show and hide elements.

The project is a single page mobile web app with a handful of buttons on it. I'm using jQuery to set a css keyframe animation on a button when it's pressed. The button hides the current page, and shows a new one. The problem is, when I click the button, the page changes before the animation is plete, and the animation is paused whilst the container is hidden. When the container is re-shown, the animation continues from where it was hidden, then the webkitAnimationEnd event triggers.

The containers are shown and hidden with:

display: none;

I can't change this to:

visibility: hidden;

because the container will still take up space. Are there any simple ways I can force the animation to be removed when the element bees invisible, or force the animation to continue when the container is hidden?

Edit: For clarification, this is the keyframe animation I'm applying in the 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);
    }
}

And this is the javascript I've got to apply the animation to the element:

$('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

Share Improve this question Follow edited Aug 6, 2012 at 13:52 brins0 asked Aug 6, 2012 at 13:14 brins0brins0 32511 gold badge55 silver badges1414 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

You could put the CSS definition of the animation in a separate class and add or remove this extra class based on visibiity:

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

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

You could try setting visibility: hidden; but also absolutely position the element off-screen, e.g position: absolute; left: -500px; /* Or whatever it takes */. In fact, you might not even need to set the visibility. It feels a bit hacky though.

I guess your problem could be solved if the animation for hiding the current page just waits until the button's animation is plete. So you'd have to trigger the page animation in the "on plete" callback of the button's animation:

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

Test it here: http://jsfiddle/Y5HSU/

I've found a solution which will work for this particular problem, although I'm not massively fond of it. Adding a setTimeout into the mix means that even when the container is hidden, the animation will be removed after 250ms (in this case).

$('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' });
});

The main problem with this is if the browser is particularly slow at executing the animation, and the timeout fires too soon cutting the animation off.

In CSS :

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