Question

令人难以置信的是Angular如何使简单的任务变得不直观，它让我想起了ASP.NET Web Forms。可怕的似曾相识。

如何在元素出现在页面后立即执行此动画？

import { trigger, transition, style, state, animate} from '@angular/core';

export const AnimacaoCadastroImovelPassoDois = trigger("animarPasso" ,[


state("inicial", style({

     width: "0%",
     border: "3px solid black"

} ) ),

state("final", style({

   width: "25%",
   border: "3px solid blue"

}) ),

  transition("inicial => final", animate("800ms"))

]);

我没有看到如果在元素出现在页面上而没有控制台抱怨“出错”的情况下我怎么能在应用程序中导致状态更改。

  <div [@animarPasso]="passo" class="passo"></div>

组件定义：

  passo:string = "inicial";

  ngAfterViewInit()
  {
     this.animarPasso();
  }

  animarPasso() : void
  {
       this.passo = "final"; // this is a crime, I cannot do this
  }

这也不起作用，组件以“最终”状态开始：

   <div [@animarPasso]="change()" class="passo"></div>


 ngAfterViewInit()
 {
     this.change();
 }

 change() : string
 { 
      return "final";
 }

Answer 1

仔细查看无效状态https://angular.io/guide/animations#the-void-state

添加从void（进入视图）到最终状态的新转换。

transition('void => final', [
  style({
    with:'0%',
    border: '3px solid black'
  }),
  animate('80ms ease-in')
]),

如何在Angular 2 +

1 个答案: