アニメーションもはやトリガ角度4+

Question

角度アニメーションを使用すると、長い間うまくいきましたが、今は停止しています。エラーはなく、ただ発射しません。

私は遷移を定義し、そのように述べました：

@Component({ 
    animations: [ 
    trigger('form2Head',[ 
     state('hidden', style({ 
      transform: 'translateY(-85%)' 
     })), 
     state('shown', style({ 
     transform: 'translateY(0)', 
     })), 
     transition('hidden <=> shown', animate('300ms ease-in')), 
    ]), 
    ], 

などのように、私のコンポーネントHTMLに結合アニメーション定義さ：

<div class="container" id="mainOuter" [@form2Head]='showModal'> 
    <div class="container" id="mainInner"> 
    <form class='frm'> 
     <h1>Please Enter Your Access Code:</h1> 
     <label for="AccessCode">Access Code:</label> 
     <input type="text" name='AccessCode' placeholder="Access Code" [(ngModel)]='AccessCode'> 
     <button class="submit" (click)='routeConfirm(AccessCode)'>Submit</button> 
    </form> 
    <div class="straggler"> 
     <i class="fa fa-gear" id='reset'(click)='animate()'></i> 
     <h1 class="sweeptitle">--- Title Of Sweep ---</h1> 
     <h1 class="tagline">--- Tagline ---</h1> 
    </div> 
    </div> 
</div> 
<div class="modalContainer"[@form2Head]='showModal' *ngIf='clicked==true'> 
    <app-confirm [Id]='AccessCode'></app-confirm> 
</div> 

とコンポーネントのTSファイルでアニメーションを制御しますこのように：

animate(): void{ 
    this.showModal = (this.showModal === 'hidden'? 'shown': 'hidden'); 
    console.log(this.showModal); 
    } 

および

それは* ngIfに適用されますとき

clicked: boolean = false; 
    routeConfirm = function(): void{ 
    this.clicked = !this.clicked; 
    this.animate(); 
    } 
} 

わからない、それはしかし停止する理由...

Answer 1

角度は、アニメーションが表示されません。 * ngIfでdivにラッパーを入れてアニメーションを適用する