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クラス	説明
.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で終了します