angular - 加载组件时动画效果失败

Question

我想在页面组件加载的时候做一个opacity的效果，但是我发现必须设置一个setTimeout()才能运行成功。 有没有更好的办法？

例如：

组件：

@Component({
  selector : 'my-app',
  template: `
  <div id="component" [ngClass]="{show: block}">
    content
  </div>
  `
})
export class FaderComponent implements OnInit {
  block: boolean = false
  constructor(){}
  ngOnInit() {

    setTimeout(()=>{
      this.block = true;
    },100)

  }
}

scss:

#component {
  opacity: 0;
  transition: 0.4s;
  &.show{
    opacity: 1;
  }
}

Answer 1

您可以参考example 在组件加载时添加动画。