获取 Angular 中元素的高度 2

Question

我正在尝试 'slide toggle' 使用 Angular 2 个动画的元素。

https://plnkr.co/edit/Dof60vwHp79eiThhj9vW?p=preview

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss'],
  animations: [
      trigger('toggleHeight', [
          state('inactive', style({
            height: '0',
          })),
          state('active', style({
              height: '100%' //this.el.nativeElement.scrollHeight + 'px'
          })),
          transition('inactive => active', animate('300ms ease-in')),
          transition('active => inactive', animate('300ms ease-out'))
      ])
  ]
})

以上代码有效，但我无法准确看到高度的变化。我知道不可能用 CSS 中的 'auto' 值对 'height' 属性进行动画处理。

为了自动生成高度，是否可以做成类似的东西，

state('active', style({
   height: this.nativeElement.height + 'px'
})),

?

谢谢。

Answer 1

据我所知这应该有效。

 height: '*'

刚刚检查过。有效！

您可以在此处阅读更多内容：https://angular.io/docs/ts/latest/guide/animations.html#!#automatic-property-calculation

获取 Angular 中元素的高度 2

Get height of an element in Angular 2

angular

angular2-animation