情報ボードと呼ばれるコンポーネントを数秒後にアニメーション化したいと思っています。私はそれを終了アニメーションとしてスライドさせる考えがありました。私はこのスレッドに係るCSS-アニメーションでこれを行うことができるので このための私のアプローチは、非常に簡単です：私のSCSSファイルは非常に簡単探しているAngular 2 Slide Up and Down Animation角2の高さのアニメーション - バインディングのタイミング
：
.info-board {
transition: height 1s;
overflow: hidden;
}
問題は文の中で発生します上のスレッドから： 'auto'に設定された高さをアニメーション化することはできません。情報ボードは共有コンポーネントでなければならず、最初は目に見えないようにしなければならず、興味深いことが起こったときにのみ表示されるため、これは意味があります。だから、
、私のコンポーネントのhtmlを見て：
<div *ngIf="informationMessage">
<div #contentElement class="info-board" [style.height]="contentHeight">
<alert type="{{alertType}}">
<strong>{{ informationHeading }}</strong> {{ informationMessage.messageText }}
</alert>
</div>
</div>
あまりにも派手な何も：informationMessage、シンプルなDTOが、設定されている場合は、それが示されなければなりません。私は適切にアニメーション化するためにバインディングを使って高さを設定します。 複雑な部分：最初にinfo-boardが表示されていない場合は、基本的にdtoが設定され、htmlがレンダリングされるのを待つ必要があります。私がこれまでに見つかっただけフックは、このコードにつながる、「afterViewChecked」いずれかです。
@ViewChild('contentElement') public contentElement: ElementRef;
ngAfterViewChecked(): void {
this.checkSetBoardSize();
}
private checkSetBoardSize() {
if (this.contentElement && this.contentElement.nativeElement) {
this.contentHeight = this.contentElement.nativeElement.scrollHeight + 'px';
}
}
このイベントはViewChildが設定されていることを、私は確認することができます唯一のものであるが、遅すぎるように思わ：これはチェンジトラッキングロジックの最後のステップなので、設定した高さは無視されます。 "ngAfterContentChecked"は役に立ちましたが、このうちViewChildは設定されていません。 私はchangetrackingを '再トリガーする'可能性も見つけられませんでした。また、ViewChildrenを使ってAngular 2 @ViewChild in *ngIfのアプローチを働かせてもらえませんでした。
私には何らかの可能性がありませんか？私は、nativeElementsを使って作業するのは良い考えではないことを知っていますが、私の研究では、これは現在高さで作業する必要があります。
質問のタイトルをスペルチェックしてください。 –
'max-height'を動かすだけです。 –