在Angular 2

Question

我试图滑动切换＆＃39;使用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'))
      ])
  ]
})

以上代码有效，但我无法准确看到高度的过渡。我知道不可能在高度上设置动画。属于＆＃39; auto＆＃39; CSS中的值。

为了自动生成高度，是否可以使其成为像

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

感谢。

Answer 1

这应该适用于AFAIK。

 height: '*'

刚检查过。它有效！

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