Angular 2/4 Анимация на высоте div - программирование

Я постараюсь быть коротким. По какой-то причине моя анимация работает нормально с атрибутом стиля width/opacity, но не работает с атрибутом height....

анимация -

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})) 
])
])

Изменение 'height' на width/opacity и анимация работают отлично... кто-нибудь знает, где проблема? не мог найти относительный ответ нигде.

пример того, чего я пытаюсь достичь, это как анимация в 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 показывали анимацию, которую я указал.

Помогите! ^^

Ответ 1

У вас нет состояний, определенных в вашей функции 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>