Skip to main content

 

パターン

 

従来のWebアプリにのみ適用されます

 

OutSystems

Animate

プレースホルダ内の要素のアニメーションを作成します。

Animateは、デフォルトアニメーションを追加して画面に表示されるときに要素を強調するために使用します。アニメーションは見慣れた実際の動作に似たものにし、ユーザーがインターフェイスを理解しやすいようにする必要があります。

使用方法

コンテンツをプレースホルダ内にドラッグし、ブロックのアニメーションのタイプを構成します。アニメーションの開始時刻と実行時間を定義することもできます。

1.Animateパターンをプレビューにドラッグします。

1.プレースホルダに必要なコンテンツを設定します。

![](<images/animate-image-1.png>)

1.入力パラメータをデフォルト値に設定します。

![](<images/animate-image-2.png>)

入力パラメータ

入力名 説明 必須 デフォルト値
EnterAnimation 開始アニメーションを設定します。 EnterAnimation Identifier False Entities.EnterAnimation.EnterFade
LeaveAnimation 終了アニメーションを設定します。 LeaveAnimation Identifier False Entities.LeaveAnimation.LeaveFade
Speed アニメーションの最後に達するまでにかかる時間。 Speed Identifier False なし
Delay アニメーション開始前の待機時間(ミリ秒単位) Integer False 0
ExtendedClass このブロックにカスタムスタイルクラスを追加します。 Text False なし

レイアウトおよびクラス

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で終了します

高度なユースケース

ToggleAnimateサーバーアクションを使用する

画面の要素をアニメーションを使用して非表示にすることができます。

  1. Animateパターンの名前を設定します。

  2. On Click関数のMethodを「Submit」に設定し、Destinationプロパティで新しいアクションを作成します。

  3. 作成したアクションで、ToggleAnimateアクションをドラッグしてウィジェットIDを設定します。

  4. パブリッシュしてテストします。

スクロール時にアニメーションを使用する

要素が画面に表示されていないときに要素を読み込み、アニメーションを実行することができます。

  1. LoadOnVisibleパターンをドラッグします。LoadOnVisibleで、Animateパターンを追加して必要なコンテンツを含めます。

  2. パブリッシュしてテストします。

  • Was this article helpful?