0

私は小さなデモ/プロトタイプアプリに取り組んでおり、アイソトープを使用してdivのグループのフィルタリングをアニメーション化しています。divは色付きのブロックで、内部にテキストがあり、.ajax関数を使用して自動的に更新されてJSONデータを取得します。

このアプリは、ASP.NETMVCの完全なビューといくつかの部分的なビューのセットです。タイルは1つのビューにあります。タイルをクリックすると、ユーザーはそのタイルの「コンテンツ」の新しいビューページに移動します。ビュー間にアニメーション化されたフェードアウト/フェードインがあります。（これを作成した開発者は元々部分的なビューを持っていましたが、戻るボタンが機能するための要件が​​追加されました。これがすべてのコンテンツが完全なビューに変更された理由です...そして残念ながらトランジションが途切れ途切れになっている理由です。）

私の問題は、タイルをクリックすると、同位体divがフェードアウトする前に点滅することです。

わかりやすくするために、ここに小さな図を示します。:)

同位体フェードアウトフラッシュ

この種のフラッシュを引き起こすフェードを処理するjQueryクリックイベントには何もありません。クリックイベントは現在のinnerContentをフェードアウトし、コンテンツがフェードアウトした後、次のビューをwindow.location.hrefでリロードします。メインのMVCレイアウトは、次のビューのフェードインを処理します。ステップスルーするとき、またはアラートボックスのデバッグ（クリック機能の各ポイントにalert（ "i'm at this point"）を挿入する）を実行すると、フラッシュが表示されません。

これは、タイルクリックを処理する関数です。

var theTileId = $("#" + divId).attr("data-tile-id");

var appName = "Applications>" + $（ "＃" + divId）.attr（ "data-tile-appName"）; localStorage.setItem（ "breadcrumb"、appName）;

$（ "＃innercontainer"）。fadeOut（250、function（）{window.location.href ='@ Url.Action（ "Application360"、 "Larry"）？an ='+ appName;}）;

そして、これはすべてのビューのフェードインを処理するメインのレイアウト機能です。

        $(document).ready(function () {
        $("#innercontainer").animate({ opacity: '0' }, 0, function () {
            $("#innercontainer").delay(400).animate({ opacity: '1' }, { duration: 'slow', easing: 'swing' });
        });
    });

何が起こっているのかについてのアイデアはありますか？jsfiddleを投稿しなかったことをお詫びしますが、アプリは少し大きく、機密性が高いと考えられています（ご存知のとおり、いつものことです）。本当に必要な場合は、後で何かを作り上げることができます。プロトタイプでこれを解決することはそれほど重要ではありませんが、できるだけ滑らかに見えるようにするとよいでしょう。ありがとう！

4

1 に答える 1

1

私はこれと同じ問題を抱えていました。私の解決策は、jqueryを使用するように強制することでした。Isotopeは、animationEngineに「best-available」、「css」、「jquery」の3つのオプションを提供します。次に、animationOptionsを設定します。詳細については、こちらをご覧ください。

注：追加の.animate（）を使用すると、アニメーションが2回実行されるため、「jquery」オプションが設定されたフラッシュが発生する可能性があります。

于 2012-12-05T17:30:55.757 に答える