アニメーションの移行両方の方法
1. 角度+アニメーション実装
- ではアプリ-module.ts BrowserAnimationsModuleに組み込まれました
1. 「@角度/プラットフォームブラウザ/アニメーション」からインポート{BrowserAnimationsModule}。2 .imports： [BrowserAnimationsModule]、
-
で使用するアセンブリの必要性。1 の.htmlファイル[@openClose] = "裁きの値"2 .TSのファイル2.1引入「@角度/アニメーション」からインポート{トリガ、スタイル、状態、アニメーション、トランジション、キーフレーム、グループ}。2.2 @Componentあなたが必要とする入力遷移アニメーションアニメーション：[]
例：
<ULクラス= "childHeight" [@openClose] = "いるisOpen 'オープン'：？ 'クローズ'">
<LI>一般要素ます。</ li>
<LI>アドバンスドエレメントます。</ li>
<LI>編集</ LI>
<LI>バリデーションます。</ li>
</ UL>
「@角度/アニメーション」からインポート{トリガ、スタイル、状態、アニメーション、トランジション、キーフレーム、グループ}。
@成分（{
アニメーション：[
トリガー（ 'openClose'、[
状態（ 'オープン'、スタイル（{
高さ：「200pxの」
幅： '100％'、
不透明度：1、
}）
）、
状態（ '閉じ'、スタイル（{
高さ：「0PX」
幅： '100％'、
不透明度：0.5、
}）
）、遷移（ '閉=>オープン'、[
アニメーション（ '1S'）
]）、遷移（ 'オープン=>閉鎖'、[
アニメーション（ '1S'）
]）
]）
]
}）
公共いるisOpen：ブール=偽;
あなたは{）（イベントの名前をクリックする必要があります
！this.isOpen = this.isOpen。
}
方法2使用してCSS3 + ngclass
HTML内のコンポーネント
<ul class="childHeight" [ngClass]="{'formStyle':formall,'formOut':!formall}" >
<li>General Elements</li>
<li>Advanced Elements</li>
<li>Editors</li>
<li>Validation</li>
</ul>
scss中
.formStyle{zoom: 1; height: 200px !important;background-color:transparent; transition: 1s ease-in;}
.formOut{height: 0px !important; transition: 1s linear;}
ts中
你需要点击事件名(){
this.isOpen = !this.isOpen;
}