onInit 内部的 Angular2 animation 不起作用

Question

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

这是组件的 html：

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

   </div>

这是 animation：

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

当页面加载时，我将触发这个 animation：

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";
  }
}

Answer 3

请使用：

transition('void => wided',animate(4000))])

stage void表示元素在 DOM 中不存在然后出现
关于 void state 参见文档