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

Question

我想在加载页面组件时产生opacity效果，但是我发现必须将其设置为setTimeout()才能成功运行。有更好的方法吗？

例如：

component：

@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作为参考，以在组件加载时添加动画。