div 高度上的 Angular 2/4 动画

Question

我会尽量保持简短。出于某种原因，我的动画似乎在宽度/不透明度样式属性上工作正常，但在高度属性上不起作用....

动画-

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 提供)并充满许多表示“hi”的行。我想要在 div.animate show 上制作我指定的动画。

救命啊! ^^

Answer 1

您的 trigger() 函数中没有定义任何状态。

trigger创建一个命名的动画触发器，包含 state() 和 transition() 条目的列表，当绑定(bind)到触发器的表达式发生变化时(表达式为 [@slideInOut]="helpMenu" 在下面的示例中)。

@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 {

  helpMenu: string;

  constructor() { }

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

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

}

然后像这样在你的 View 中使用它:

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