Angular 4 Animation not working

Question

我爲我的FormGroup創建了一個Angular動畫，以便不同的Form部分按順序顯示動畫。這裏是代碼 -

animations:[ 
    trigger('visibilityChanged', [ 
state('shown' , style({ opacity: 1 })), 
state('hidden', style({ opacity: 0 })), 
transition('shown => hidden', animate('600ms')), 
transition('void => *', animate('1000ms')), 
]) 
    ] 

這裏是HTML的

<form [formGroup]="regForm"> 
     <div *ngIf="showcontrol[0]" @visibilityChanged> 
     <span id="formheading" class="text-center">ENTER TEAM DETAILS</span> 
     <div class="form-group"> 
      <label for="teamname">Team Name:</label> 
      <label class="validations" @load *ngIf="!regForm.get('team_name').valid && regForm.get('team_name').touched">Please Enter a Valid Team Name!</label> 
      <input type="text" class="form-control" formControlName="team_name" id="teamname" required placeholder="Enter Your Team Name"> 
     </div> 

....... ..

Answer 1

設置在該組的動畫與* ngIf hidding /展示該組。在這個解決方案中，我只爲該條件設置了兩個值，但將其適用於您的需要。此外，我還設置了一些可能需要適應您需要的樣式。但是，請記住，如果將它設置爲false ngIf將刪除該組，所以團體將 '搬家' 如果沒有風格：

HTML：

<form #individual="ngForm"> 
    <div class="myDiv"> 
    <div [@visibilityChanged] *ngIf="myCondition===1" class="myGroup1 form-group"> 
     <label for="name">Name:</label> 
     <input type="text" #myModel="ngModel" class="form-control" id="name" ngModel name="name" pattern="[a-zA-Z ]*" required placeholder="Enter Your Name"> 
     <label style="color:red" *ngIf="myModel.invalid">INVALID</label> 
    </div> 

    <div [@visibilityChanged] *ngIf="myCondition===2" class="myGroup2 form-group"> 
     <label for="name">Lastname:</label> 
     <input type="text" #myModel="ngModel" class="form-control" id="name" ngModel name="name" pattern="[a-zA-Z ]*" required placeholder="Enter Your Name"> 
     <label style="color:red" *ngIf="myModel.invalid">INVALID</label> 
    </div> 
</div> 
    <button type="submit" class="btn" (click)="onSave(individual)" [disabled]="!individual.valid">SUBMIT</button> 

<button (click)="toggle()">Click me to toggle</button> 
</form> 

打字稿：

... 
    myCondition=1; 
    toggle(){ 
    this.myCondition = this.myCondition === 2 ? 1 : 2 
    } 
    ... 

動畫：

trigger('visibilityChanged', [ 
     transition(':enter', [ 
      style({ opacity: 0, transform: 'translateX(-40px)' }), 
      animate(600, style({ opacity: 1, transform: 'translateX(0)' })) 
     ]), 
     transition(':leave', [ 
      style({ opacity: 1, transform: 'translateX(0)' }), 
      animate(600, style({ opacity: 0, transform: 'translateX(-40px)' 
     })) 
    ]) 

DEMO