アニメーションが即座に

Question

私はアニメーションを作るためにクリックすると、私は二つの状態と二つの状態

間の遷移でトリガを作成し、私は3000ms遷移時間を入力すると、それは状態

<div class="divv" [@goals]='stateExression'> 
    <mat-card class="example-card"> 
    <mat-card-header> 
     <div mat-card-avatar class="example-header-image"></div> 
     <mat-card-title>Shiba Inu</mat-card-title> 
     <mat-card-subtitle>Dog Breed</mat-card-subtitle> 
    </mat-card-header> 
    <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu"> 
    <mat-card-content> 
     <p> 
     Hello 
     </p> 
    </mat-card-content> 
    <mat-card-actions> 
     <button mat-button (click)="anim()">LIKE</button> 
     <button mat-button>SHARE</button> 
    </mat-card-actions> 
    </mat-card> 
</div> 

でも即座に実行されます動作しますチェンジ機能：

stateExression : string='inactive'; 

anim() { 
    if(this.stateExression === 'inactive') 
    this.stateExression ='expended'; 
    else 
    this.stateExression = 'inactive'; 
} 

アニメーショントリガー：

trigger('goals', [ 
    state('inactive', style({ 
     height: '300px' 
    })), 
    state('expended', style({ 
     height: '0px' 
    })), 
    transition ('inactive <=> expanded',animate('2000ms')) 

    ]) 
] 

移行をゆっくり実行するには？

Answer 1

trigger('goals', [ 
    state('inactive', style({ 
     height: '300px' 
    })), 
    state('expended', style({ 
      ^^^^^^^^^^^ 
     height: '0px' 
    })), 
    transition ('inactive <=> expanded',animate('2000ms')) 
          ^^^^^^^^^^ 
    ]) 
] 

状態名がexpended