角度2/4 divのアニメーションの高さ

Question

私はそれを短くしています。 何らかの理由で、私のアニメーションは、幅/不透明スタイル属性で正常に動作するようですまだそれは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})) 
]) 
]) 

幅/不透明度とアニメーションは素晴らしい作品... 誰もが問題を知っていますか？どこでも相対的な回答は見つかりませんでした。読書のための https://www.udemy.com/meteor-react/

感謝 -

私が達成しようとしているものの例は、セクションのdivの高さは、すべてのビデオの表示を拡大する上でクリックすると、udemyでアニメーションのようなものです。

更新 - まだ動作しません...

私は上のアニメーションてるものに多分その何か？何が起こるか

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

は（ngifで）私がクリックすると、div.animateが表示されていると「こんにちは」と言っラインがたくさんでいっぱい。 div.animateショーで、私が指定したアニメーションを作りたいと思っています。

助けてください！ ^^

Answer 1

これは私が私のために働くものです。私はトリガの変更状態を持っているため、少し違った構文で、トランジションメソッドを使ってアニメートします。

@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" class="d-inline-block"> 
    <h1>My Title</h1> 
    <p>My paragraph</p> 
</div> 
<button class="float-right" (click)="toggleHelpMenu()">help</button>