Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

従来の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パターンの名前を設定します。

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

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

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

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

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

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

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

  • Was this article helpful?