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

Animateのリファレンス

レイアウトおよびクラス

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

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

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>)