Animateのリファレンス
レイアウトおよびクラス
CSSセレクタ
| 要素 | CSSクラス | 説明 |
|---|---|---|
| .animate-wrapper | .is--visible | アニメーションが画面に表示される場合 |
| .animate-wrapper | .is--hidden | アニメーションが画面から消える場合 |
| .animate | .enter-bottom | アニメーションが画面の下から表示される場合 |
| .animate | .enter-fade | アニメーションがフェードしながら画面に表示される場合 |
| .animate | .enter-left | アニメーションが画面の左から表示される場合 |
| .animate | .enter-right | アニメーションが画面の左から表示される場合 |
| .animate | .enter-scale | アニメーションが拡大縮小しながら画面に表示される場合 |
| .animate | .enter-top | アニメーションが画面の上から表示される場合 |
| .animate | .leave-bottom | アニメーションが画面の下から消える場合 |
| .animate | .leave-fade | アニメーションがフェードしながら画面から消える場合 |
| .animate | .leave-left | アニメーションが画面の左から消える場合 |
| .animate | .leave-right | アニメーションが画面の右から消える場合 |
| .animate | .leave-scale | アニメーションが拡大縮小しながら画面から消える場合 |
| .animate | .leave-top | アニメーションが画面の上から消える場合 |
| .animate | .animate-slow | アニメーションは1500msで終了します |
| .animate | .animate-fast | アニメーションは500msで終了します |
高度なユースケース
Toggle Animateサーバーアクションを使用する
画面の要素をアニメーションを使用して非表示にすることができます。
-
Animateパターンの名前を設定します。
-
On Click関数のMethodを「Submit」に設定し、Destinationプロパティで新しいアクションを作成します。
-
作成したアクションで、ToggleAnimateアクションをドラッグしてウィジェットIDを設定します。
-
パブリッシュしてテストします。
スクロール時にアニメーションを使用する
要素が画面に表示されていないときに要素を読み込み、アニメーションを実行することができます。
-
LoadOnVisibleパターンをドラッグします。LoadOnVisibleで、Animateパターンを追加して必要なコンテンツを含めます。
-
パブリッシュしてテストします。
