onInit 中的 Angular2 动画不起作用

Question

在 Angular2 应用程序中，我正在尝试制作动画

这里是组件的 html:

   <div  [@playBox]="state" id="toPlay" class="playBox rounded-box">

   </div>

这是动画：

animations:[
    trigger('playBox',[
            state('closed',style({
            width: '5%',
            backgroundColor:'red',
            transform:'translateX(0)'
          })),
          state('wided',style({
                width: '100%',
                border: '3px solid red',
                backgroundColor:'transparent'
          })),transition('closed => wided',animate(4000))])
  ]

我将在页面加载时触发此动画：

export class AppComponent implements OnInit{
  state="closed";
 public ngOnInit(): any
 {

        if(this.state=="closed"){

            this.state="wided";
         }
}

Answer 1

不确定这是最合适和最优雅的解决方案，但在下一个刻度中更改 state 将按预期触发动画：

public ngOnInit(): any {
  if (this.state == "closed") {
    setTimeout(() => this.state = "wided")
  }
}

否则，this.state = "wided" 会重新定义初始 closed 状态，并且组件会使用 wided 初始化为没有动画的初始状态。

Answer 2

您可以使用 ngAfterViewInit 生命周期钩子

ngAfterViewInit() {
  if (this.state == "closed") {
    this.state = "wided";
  }
}

onInit 中的 Angular2 动画不起作用

Angular2 animation inside onInit does not work

angular

animation

angular-animations