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

Angular 4动画无法正常工作

1 个答案: