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)

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

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

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

如何将jQuery addClass代码转换为Angular

1 个答案: