Question

使用Angular Animations，它运作良好很长一段时间，现在它已经停止了。没有错误，只是没有解雇。

我已经定义过渡和状态如下：

@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);
  }

和

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

不知道为什么会停止......

Answer 1

当Angular应用* ngIf时，它不会显示动画。使用* ngIf在div上放置一个包装器并在其上应用动画

动画不再触发Angular 4+

1 个答案: