3

作業中のプロジェクトのボタンにクリック/タッチ アニメーションを追加しようとしていますが、要素を表示および非表示にするボタンのアニメーション化に関してイライラする問題に遭遇しました。

このプロジェクトは、いくつかのボタンを備えた単一ページのモバイル Web アプリです。jQueryを使用して、ボタンが押されたときにボタンにcssキーフレームアニメーションを設定しています。このボタンは現在のページを隠し、新しいページを表示します。問題は、ボタンをクリックすると、アニメーションが完了する前にページが変更され、コンテナが非表示になっている間にアニメーションが一時停止することです。コンテナーが再表示されると、非表示になっていた場所からアニメーションが再開され、webkitAnimationEnd イベントがトリガーされます。

コンテナーは、次のように表示および非表示にされます。

display: none;

これを次のように変更することはできません:

visibility: hidden;

コンテナはまだスペースを占有するためです。要素が非表示になったときにアニメーションを強制的に削除したり、コンテナが非表示になったときにアニメーションを強制的に続行したりする簡単な方法はありますか?

編集：明確にするために、これは私がjavascriptに適用しているキーフレームアニメーションです：

@-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。しかし、それは少しハッキーな感じがします。

于 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

私はそれがあまり好きではありませんが、この特定の問題に有効な解決策を見つけました。ミックスに setTimeout を追加すると、コンテナーが非表示の場合でも、アニメーションは 250 ミリ秒後に削除されます (この場合)。

$('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 に答える