Angular 动画不再触发角度4+；

使用角度动画，它在很长一段时间内工作正常，现在它刚刚停止。没有错误，只是没有开火

我定义了转换和状态，如下所示：

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

及

---

不确定为什么会停止…

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

您是否在class=“container”或id=“mainOuter”上添加了新属性？就像样式表中的翻译一样。我不确定你在问什么，我正在使用Angular Animations模块来处理动画。这一切都是由typescript控制的，而不是在CSS中。虽然我的初始位置是CSS，但我解释自己：组件样式表中有任何翻译吗？与否：class=“modalContainer”[@form2Head]=“showmodel”需要空格。应用程序确认组件上有一个translateY函数。在它的父容器中没有，上面显示的哪个组件用于测试删除该翻译，或者如果您不想将标记与动画交替使用，请在两个元素上使用

*ngIf

，并使用

：enter

和

：leave

转换。我将

*ngIf

移动到

app confirm

标记，以便它仅应用于该组件标记，而不是包含的div。仍然不工作。。。。

<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>

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