在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

这应该可以使用AFAIK。

 height: '*'

刚刚检查。有用 ！

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