【发布时间】：2017-07-25 07:36:31
【问题描述】：
我想要一个组件，我称之为信息板，它可以在几秒钟后以动画形式消失。我的想法是让它作为退出动画滑上去。 我的方法很简单，因为我可以用关于这个线程的 css 动画来做到这一点：Angular 2 Slide Up and Down Animation
我的 scss 文件看起来很简单：
.info-board {
transition: height 1s;
overflow: hidden;
}
问题出现在上述线程的句子中：设置为“自动”的高度无法设置动画。我想这是有道理的，但给我带来了很多麻烦，因为我的信息板应该是一个共享组件，并且在开始时也允许不可见，只有在发生有趣的事情时才会显示。
所以，看看我的组件-html：
<div *ngIf="informationMessage">
<div #contentElement class="info-board" [style.height]="contentHeight">
<alert type="{{alertType}}">
<strong>{{ informationHeading }}</strong> {{ informationMessage.messageText }}
</alert>
</div>
</div>
没什么太花哨的：如果设置了信息消息，一个简单的 dto，它应该被显示。我通过绑定设置高度以正确设置动画。 现在是复杂的部分：如果一开始没有显示信息板，我基本上需要等待设置 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。 我也没有找到“重新触发”更改跟踪的可能性，Angular 2 @ViewChild in *ngIf 上的 ViewChildren 方法也没有为我工作。
我错过了某种可能性吗？我知道，使用 nativeElements 不是一个好主意，但根据我的研究，目前需要使用高度。
【问题讨论】：
-
请对您的问题标题进行拼写检查。
-
只是动画
max-height。