ページごとに小さな広告を1つ表示するだけだと約束します。このメッセージを非表示にすると、再び表示されなくなります。
トランジション
スケール
要素を拡大または縮小して表示/非表示にすることができます。
$('.autumn.leaf') .transition('scale') ;
ズーム2.3の新機能
遠くから要素をズームインして表示することができます。
$('.autumn.leaf') .transition('zoom') ;
フェード
要素をフェードイン/フェードアウトさせることができます（上下左右）。
$('.autumn.leaf') .transition('fade') ;
$('.autumn.leaf') .transition('fade up') ;
$('.autumn.leaf') .transition('fade down') ;
$('.autumn.leaf') .transition('fade left') ;
$('.autumn.leaf') .transition('fade right') ;
フリップ
要素を縦または横にフリップして表示/非表示にすることができます。
$('.autumn.leaf') .transition('horizontal flip') ;
$('.autumn.leaf') .transition('vertical flip') ;
ドロップ
要素を上からドロップして表示することができます。
$('.autumn.leaf') .transition('drop') ;
フライ
要素をキャンバス外から表示することができます。
$('.autumn.leaf') .transition('fly left') ;
$('.autumn.leaf') .transition('fly right') ;
$('.autumn.leaf') .transition('fly up') ;
$('.autumn.leaf') .transition('fly down') ;
スイング
要素をスイングさせて表示することができます。
$('.autumn.leaf') .transition('swing left') ;
$('.autumn.leaf') .transition('swing right') ;
$('.autumn.leaf') .transition('swing up') ;
$('.autumn.leaf') .transition('swing down') ;
ブラウズ
要素をシリーズの一部として表示/非表示にすることができます。
$('.autumn.leaf') .transition('browse') ;
$('.autumn.leaf') .transition('browse right') ;
スライド
要素を上下左右からスライドさせて表示することができます。
$('.autumn.leaf') .transition('slide down') ;
$('.autumn.leaf') .transition('slide up') ;
$('.autumn.leaf') .transition('slide left') ;
$('.autumn.leaf') .transition('slide right') ;
静的アニメーション
ジグリング
要素をジグリングさせて形状に注意を引くことができます。
$('.autumn.leaf') .transition('jiggle') ;
フラッシュ
要素をフラッシュさせて注意を引くことができます。
$('.autumn.leaf') .transition('flash') ;
シェイク
要素をシェイクさせて位置に注意を引くことができます。
$('.autumn.leaf') .transition('shake') ;
パルス
要素をパルスさせて可視性に注意を引くことができます。
$('.autumn.leaf') .transition('pulse') ;
タダ
アクションに対してユーザーに肯定的なフィードバックを与えることができます。
$('.autumn.leaf') .transition('tada') ;
バウンス
要素をバウンスさせて控えめに思い出させることができます。
$('.autumn.leaf') .transition('bounce') ;
グロー2.3の新機能
要素をグローさせてページ内での位置を示すことができます。
$('.autumn.leaf') .transition('glow') ;
可視性
要素のアニメーションキューが終了した後、最終的な可視状態が決定されます。アニメーションがアウトワードトランジションの場合、最終的な可視状態は非表示になります。アニメーションがインワードの場合、アニメーション終了後、要素は表示されます。
$('.long.leaf.image') .transition('scale') ;
方向の指定
アニメーションの方向を強制するには、アニメーション名にinまたはoutを追加します。
$('.long.leaf.image') // 方向が指定されている場合は、それが優先されます .transition('horizontal flip in') .transition('vertical flip in') ;
自動方向
アニメーションの方向が指定されていない場合、要素の現在の可視性に基づいて自動的に決定されます。たとえば、要素が表示されている場合、「フェードアウト」アニメーションが呼び出され、要素が表示されていない場合、「フェードイン」アニメーションが呼び出されます。
$('.long.leaf.image') // 利用可能な場合はfade up outが使用されます .transition('fade up') // これはfade up inになります .transition('fade up') ;
グループ化されたトランジション
アニメーション間隔
グループ内の複数の異なるアイテムをアニメーション化する場合、各アイテムが連続して表示されるように間隔を使用することができます。
$('.jiggle.images .image') .transition({ animation : 'jiggle', duration : 800, interval : 200 }) ;
アニメーション順序
要素のグループを非表示にする場合、デフォルト設定ではreverse: 'auto'が使用されます。これは、レイアウトのリフローを回避するために、要素を非表示にする際にアニメーションの順序を後ろから前に自動的に反転させます。要素を表示する場合は、順序が通常のシーケンスに戻ります。
$('.sequenced.images .image') .transition({ animation : 'scale', reverse : 'auto', // デフォルト設定 interval : 200 }) ;
順序の強制
アニメーションの方向に関係なく、アニメーションの反転を強制的に行う必要がある場合は、reverse: trueを使用できます。
$('.reverse.images .image') .transition({ animation : 'pulse', reverse : true, interval : 200 }) ;
静的アニメーション
インアニメーションまたはアウトアニメーションが定義されていないアニメーションは、実行後も現在の可視性を維持します。
$('.long.leaf.image') .transition('pulse') ;
ループ
アニメーションループは、ループを設定することで制御できます。コールバックは各ループサイクル後に発生します。
$('.long.leaf.image') .transition('set looping') .transition('bounce', '2000ms') ;
$('.long.leaf.image') .transition('remove looping') ;
はじめに
UIトランジションは、クロスブラウザのコールバック、高度なキューイング、および機能検出を提供するJavaScriptでCSSトランジションを使用するためのラッパーを提供します。
トランジションは、ドロップダウンやモーダルなどの他のUIモジュールと緩やかに結合されており、要素のトランジションを提供します。
種類
トランジションは、3つのカテゴリに分けられます。**インワードトランジション**、**アウトワードトランジション**、**静的トランジション**です。これらの3つのカテゴリは、アニメーション完了後の要素の可視性を決定します。
使用方法
初期化
引数なしでトランジションが呼び出された場合、すべてのデフォルト設定が使用されます。
$('.green.leaf') // すべてデフォルト .transition() ;
設定の受け渡し
トランジションは、animateと同様の引数ショートハンドを使用します。コールバック関数、アニメーション時間、その他の設定を同じ引数を使用して指定できます。時間は、CSSショートハンド付きの文字列、または数値で指定できます。
$('.green.leaf') .transition({ animation : 'scale', duration : '2s', onComplete : function() { alert('done'); } }) ;
表示タイプ
アニメーションは、ブロックレベル要素だけでなく、任意の表示タイプで使用できます。たとえば、`inline-block`ステータスを維持しながらボタンをアニメーション化できます。
$('.test.button') .transition('horizontal flip', '500ms') ;
アニメーションのキューイング
順番に呼び出されたアニメーションはキューイングされます。キューイングされたアニメーションは、指定されていない場合、トランジションの方向を自動的に決定します。
$('.green.leaf') .transition('horizontal flip', '500ms') .transition('horizontal flip', 500, function() { alert('done!'); }) ;
アニメーションの停止
アニメーションは3つの方法で停止できます。`stop`は現在のアニメーションを終了し、`stop all`はアニメーションを終了してキューイングされたアニメーションを削除し、`clear queue`は現在の再生を続行しますが、キューイングされたアニメーションを削除します。
// 最初の水平フリップのみキャンセルされます $('.green.leaf') .transition('horizontal flip') .transition('horizontal flip') .transition('horizontal flip') .transition('stop') .transition('vertical flip') ;
// 水平反転は全てキャンセル $('.green.leaf') .transition('horizontal flip') .transition('horizontal flip') .transition('horizontal flip') .transition('stop all') .transition('vertical flip') ;
// キューに入っているアニメーションは全てキャンセル $('.green.leaf') .transition('horizontal flip') .transition('horizontal flip') .transition('vertical flip') .transition('clear queue') ;
トランジションなしでの表示/非表示
コンテンツをアニメーションなしで非表示にするには、トランジションのshowとhideの動作を使用できます。これにより、アニメーションと同様に、要素のflexやtable-cellなどの表示タイプが保持されます。
$('.demo.table tr:last-child') .transition('toggle') ;
$('.demo.table td:last-child') .transition('hide') ;
| ジョン・リルキ | jhlilk22@yahoo.com | いいえ |
| ジェイミー・ハリンントン | jamieharingonton@yahoo.com | はい |
| ジル・ルイス | jilsewris22@yahoo.com | はい |
動作
以下のすべての動作は、次の構文を使用して呼び出すことができます。
$('.your.element') .transition('動作名', argumentOne, argumentTwo) ;
| 動作 | 説明 |
|---|---|
| stop | 現在のアニメーションを停止し、キューを保持します。 |
| stop all | 現在のアニメーションとキューに入っているアニメーションを停止します。 |
| clear queue | キューに入っているアニメーションをすべてクリアします。 |
| show | 現在のアニメーションを停止し、要素を表示します。 |
| hide | 現在のアニメーションを停止し、要素を非表示にします。 |
| toggle | 非表示と表示を切り替えます。 |
| force repaint | より高コストですが安定した方法を使用してリフローを強制します。 |
| repaint | 要素のリフローをトリガーします。 |
| reset | トランジション中に変更されたすべての状態をリセットします。 |
| looping | アニメーションのループを有効にします。 |
| remove looping | 要素からループ状態を削除します。 |
| disable | 無効状態を追加します（アニメーション機能を停止します）。 |
| enable | 無効状態を削除します。 |
| set duration(duration) | 要素のアニメーション時間を変更します。 |
| save conditions | アニメーション後に取得するために、すべてのクラス名とスタイルをキャッシュに保存します。 |
| restore conditions | キャッシュされた名前とスタイルを要素に追加します。 |
| get animation name | animationnameのベンダープレフィックス付きアニメーションプロパティを返します。 |
| get animation event | animationendのベンダープレフィックス付きアニメーションプロパティを返します。 |
| is visible | 要素が現在表示されているかどうかを返します。 |
| is animating | トランジションが現在発生しているかどうかを返します。 |
| is looping | アニメーションループが設定されているかどうかを返します。 |
| is supported | アニメーションがサポートされているかどうかを返します。 |
トランジション設定フォーム設定は、トランジションの動作を変更します。
| 設定 | デフォルト | 説明 |
|---|---|---|
| animation | fade | 使用する名前付きアニメーションイベント。CSSで定義する必要があります。 |
| interval | 0 | 各要素のトランジション間の時間間隔（ミリ秒）。 |
| reverse | auto | 時間間隔が指定されている場合、アニメーションの順序を設定します。autoは非表示になっているアニメーションのみを反転します。 |
| displayType | false | 最終的な表示タイプ（block、inline-blockなど）を指定し、計算する必要がないようにします。 |
| duration | 500ms | CSSトランジションアニメーションの期間。 |
| useFailSafe | true | 有効にすると、要素が非表示になっている場合でもanimationendコールバックが発生するようにtimeoutが追加されます。 |
| allowRepeats | false | 有効にすると、既に実行されているアニメーションと同じアニメーションをキューに入れることができます。 |
| queue | true | 別のアニメーションが実行されている場合に、アニメーションを自動的にキューに入れるかどうか。 |
コールバックコールバックは、特定の動作後に発生する関数を指定します。
| 設定 | コンテキスト | 説明 |
|---|---|---|
| onShow | トランジションされた要素 | 表示状態が変更された各トランジションでのコールバック。 |
| onHide | トランジションされた要素 | 非表示状態が変更された各トランジションでのコールバック。 |
| onStart | トランジションされた要素 | アニメーション開始時のコールバック。キューに入っているアニメーションに役立ちます。 |
| onComplete | トランジションされた要素 | 各トランジション完了時のコールバック。 |
DOM設定DOM設定は、このモジュールがDOMとどのようにインタフェースするかを指定します。
| 設定 | デフォルト | 説明 |
|---|---|---|
| namespace | transition | イベント名前空間。モジュールのティアダウンが、要素にアタッチされている他のイベントに影響を与えないようにします。 |
| className |
className : { animating : 'animating', disabled : 'disabled', hidden : 'hidden', inward : 'in', loading : 'loading', looping : 'looping', outward : 'out', transition : 'transition', visible : 'visible' }
|
状態にスタイルを適用するために使用されるクラス名。 |
デバッグ設定デバッグ設定は、コンソールへのデバッグ出力を制御します。
| 設定 | デフォルト | 説明 |
|---|---|---|
| name | トランジション | デバッグログで使用される名前。 |
| silent | False | 他のデバッグ設定に関係なく、エラーメッセージを含むすべてのコンソール出力を無効にします。 |
| debug | False | コンソールに標準的なデバッグ出力を提供します。 |
| performance | True | コンソールに標準的なデバッグ出力を提供します。 |
| verbose | True | コンソールに補助的なデバッグ出力を提供します。 |
| errors |
errors : { noAnimation : '指定したCSSアニメーションは見つかりません。', method : '呼び出したメソッドは定義されていません' }
|
|