Pracuję nad dodaniem animacji click / touch do przycisków w projekcie, nad którym pracuję, i natknąłem się na frustrujący problem dotyczący animowania przycisków, które pokazują i ukrywają elementy.

Projekt to mobilna aplikacja sieciowa z jedną stroną, z kilkoma przyciskami na niej. Używam jQuery, aby ustawić animację klatki kluczowej css na przycisku, gdy jest on wciśnięty. Przycisk ukrywa bieżącą stronę i pokazuje nową. Problem polega na tym, że po kliknięciu przycisku strona zmienia się przed zakończeniem animacji, a animacja zostaje wstrzymana, gdy pojemnik jest ukryty. Gdy kontener zostanie ponownie wyświetlony, animacja będzie kontynuowana od miejsca, w którym była ukryta, a następnie wyzwalane jest zdarzenie webkitAnimationEnd.

Kontenery są pokazywane i ukryte za pomocą:

display: none;

Nie mogę zmienić tego na:

visibility: hidden;

ponieważ kontener nadal zajmuje miejsce. Czy są jakieś proste sposoby, aby zmusić animację do usunięcia, gdy element stanie się niewidoczny, lub wymusić kontynuację animacji, gdy kontener jest ukryty?

Edytuj: Dla wyjaśnienia jest to animacja klatek kluczowych, którą stosuję w 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);
    }
}

I to jest javascript, który muszę zastosować animację do elementu:

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