angular - div高度上的 Angular 2/4动画

我会尽量简短一点。
出于某种原因，我的动画似乎在宽度/不透明度样式属性上工作良好，但在高度属性上却不工作…
动画-

trigger('Grow', [
transition(':enter', [   // :enter is alias to 'void => *'
  style({height:'0'}),
  animate(500, style({height:'*'}))
]),
transition(':leave', [   // :leave is alias to '* => void'
  animate(500, style({height:0}))
])
])

将“高度”更改为宽度/不透明度，动画效果很好…
有人知道问题出在哪里吗？找不到相对的答案。
我想要实现的一个例子是udemy中的动画，当点击一个部分时，div高度将扩展显示所有视频-
https://www.udemy.com/meteor-react/
谢谢你的阅读。
更新-仍然不起作用…
也许是因为我在做什么？

<div class="animate" *ngIf="show" [@animate]>
  <div  *ngFor="let video of section"><a>hi</a></div>
</div>

一旦我点击，就会显示div.animate（通过ngif），并填充许多行，表示“嗨”。
我想在div.animate show上，制作我指定的动画。
救命！^ ^

最佳答案

您的trigger()函数中没有定义任何状态。
trigger创建一个命名的动画触发器，其中包含当绑定到触发器的表达式更改时要计算的state()和transition()项列表（在下面的示例中，表达式为[@slideInOut]="helpMenuOpen"）。

@Component({
  ...
  animations: [
    trigger('slideInOut', [
      state('in', style({
        overflow: 'hidden',
        height: '*',
        width: '300px'
      })),
      state('out', style({
        opacity: '0',
        overflow: 'hidden',
        height: '0px',
        width: '0px'
      })),
      transition('in => out', animate('400ms ease-in-out')),
      transition('out => in', animate('400ms ease-in-out'))
    ])
  ]
})
export class AComponent implements OnInit {

  helpMenuOpen: string;

  constructor() { }

  ngOnInit() {
    this.helpMenuOpen = 'out';
  }

  toggleHelpMenu(): void {
    this.helpMenuOpen = this.helpMenuOpen === 'out' ? 'in' : 'out';
  }

}

然后在您的视图中使用它，如下所示：

<div [@slideInOut]="helpMenuOpen">
   <h1>My Title</h1>
   <p>My paragraph</p>
</div>
<button (click)="toggleHelpMenu()">help</button>

关于angular - div高度上的 Angular 2/4动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43497431/