javascript - 如何将 jQuery addClass 代码转换为 Angular

Question

我有以下 jQuery 代码，用于在单击提交按钮时向注册表单添加一些动画。

        setTimeout(() => {
            $('#new-user-layout').addClass('animate__fadeOut')
        }, 1000)
        setTimeout(() => {
            $('#new-user-layout').addClass('hidden')
        }, 1300)
        setTimeout(() => {
            $('#new-user-layout').removeClass('animate__fadeOut')
            $('.app-login_form-layout').css({ 'height': '28rem', 'width': '25rem' })
        }, 1600)
        setTimeout(() => {
            $('#user_credentials').removeClass('hidden')
            $('#user_credentials').addClass('animate__fadeIn')
        }, 2000)
        setTimeout(() => {
            $('#user_credentials').removeClass('animate__fadeIn')
        }, 2300)

现在这是我需要转换为 Angular 代码的 HTML 模板。如何以 Angular 方式添加这些动画类？

我尝试使用[ngClass]，但它无法正常工作。

标签： javascriptjqueryangular

Answer 1

您可以使用ViewChild,ElementRef如下Renderer2所示

@ViewChild("newuserlayout") newuserlayout: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngOnInit() {
    setTimeout(() => {
      debugger;
      this.renderer.addClass(
        this.newuserlayout.nativeElement,
        "animate__fadeOut"
      );
    }, 1000);
  }

演示https://stackblitz.com/edit/angular-viewchild-elementref-render2