Ich arbeite daran, Schaltflächen in einem Projekt, an dem ich arbeite, Klick- / Touch-Animationen hinzuzufügen, und bin auf ein frustrierendes Problem beim Animieren von Schaltflächen gestoßen, mit denen Elemente ein- und ausgeblendet werden.

Das Projekt ist eine einseitige mobile Web-App mit einer Handvoll Schaltflächen. Ich verwende jQuery, um eine CSS-Keyframe-Animation auf einer Schaltfläche festzulegen, wenn diese gedrückt wird. Die Schaltfläche blendet die aktuelle Seite aus und zeigt eine neue an. Das Problem ist, wenn ich auf die Schaltfläche klicke, ändert sich die Seite, bevor die Animation abgeschlossen ist, und die Animation wird angehalten, während der Container ausgeblendet ist. Wenn der Container erneut angezeigt wird, wird die Animation an der Stelle fortgesetzt, an der sie ausgeblendet war. Anschließend wird das Ereignis webkitAnimationEnd ausgelöst.

Die Container werden ein- und ausgeblendet mit:

display: none;

Ich kann dies nicht ändern in:

visibility: hidden;

denn der behälter nimmt noch platz ein. Gibt es einfache Möglichkeiten, die Entfernung der Animation zu erzwingen, wenn das Element unsichtbar wird, oder die Fortsetzung der Animation zu erzwingen, wenn der Container ausgeblendet ist?

Bearbeiten: Zur Verdeutlichung ist dies die Keyframe-Animation, die ich im Javscript anwende:

@-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);
    }
}

Und dies ist das Javascript, mit dem ich die Animation auf das Element anwenden muss:

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