angular - 获取Angular 2中元素的高度

Question

我正在尝试使用 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