Skip to main content

 

 

 

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

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サーバーアクションを使用する

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

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

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

![](<images/animate-4-ss.png>)

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

![](<images/animate-5-ss.png>)

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

![](<images/animate-6-ss.gif?width=600>)

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

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

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

![](<images/animate-7-ss.png>)

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

![](<images/animate-8-ss.gif?width=600>)
  • Was this article helpful?