Question

我希望有一个组件，我称之为信息板，在几秒钟后制作动画。我有想法让它作为退出动画向上滑动。我的方法非常简单，因为我可以使用关于此线程的css动画执行此操作：Angular 2 Slide Up and Down Animation

我的scss文件看起来很简单：

.info-board {
  transition: height 1s;
  overflow: hidden;
}

问题出现在上述提示的句子中：高度设置为＆＃39; auto＆＃39;不能动画。这是有道理的，我猜，但是给我带来了一大堆麻烦，因为我的信息板应该是一个共享组件，并且在开始时也被允许隐藏，只有在有趣的事情发生时才显示。

所以，看看我的component-html：

<div *ngIf="informationMessage">
  <div #contentElement class="info-board" [style.height]="contentHeight">
    <alert type="{{alertType}}">
      <strong>{{ informationHeading }}</strong> {{ informationMessage.messageText }}
    </alert>
  </div>
</div>

没什么太花哨的：如果设置了一个简单的信息messageMessage，就应该显示出来。我通过绑定设置高度，以便正确地设置它的动画。现在复杂的部分：如果信息板没有显示在开头，我基本上需要等待设置dto和要呈现的html。到目前为止我发现的唯一钩子是＆＃34; afterViewChecked＆＃34;一，导致本准则：

@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已经设置，但似乎为时已晚：由于这是更改跟踪逻辑的最后一步，因此我设置的高度将被忽略。唯一看起来很有用的其他钩子是＆＃34; ngAfterContentChecked＆＃34;，但在这一个中，ViewChild没有设置。我也没有找到重新触发＆＃39;改变跟踪也没有使用ViewChildren的Angular 2 @ViewChild in *ngIf方法为我工作。

我错过了某种可能性吗？我知道，与nativeElements合作并不是一个好主意，但从我的研究来看，目前需要处理高峰。

Answer 1

您可以使用Angular的animation功能，可以在angular docs

中找到您的案例示例

旁注：请注意，动画包（它外包给@angular/animations）的使用情况正在以角度版本>4.0.0-rc.1发生变化。更多changelog角度

角度2动画高度 - 属性 - 绑定

1 个答案: