如何在vanilla js/ts (Angular)中重启动画，并支持IOS

Question

嘿，伙计们，我正在尝试创建点击底部，用户可以点击它和动画重新启动，因为我知道这是不可能的，我们需要销毁动画和阅读它再次。所以我先试着用这种方式

HTML

<ul> ...

TS

    const element: HTMLUListElement = document.querySelector('.packages>.ulWrapper>ul');

    element.style.animation = 'none';
    element.offsetHeight; /* trigger reflow */
    element.style.animation = null;

而且它只在我的桌面上工作，所以我找到了另一种方法

HTML

    <ul id="logo" class="run-animation"> ...

TS

    var element = document.getElementById("logo");

      // -> removing the class
      element.classList.remove("run-animation");
       element.offsetHeight;
      // -> and re-adding the class
      element.classList.add("run-animation");

再说一次，它在我的桌面上工作得很好，但我也需要它在移动设备上工作

我该怎么做呢？我使用的是Angular-9

谢谢你们！！

@AshishYadav我添加了一个link

Answer 1

嘿，伙计们，经过艰苦的工作，我找到了一个解决方案，我来分享它。

      const selector: string = '.packages>.ulWrapper>ul';
      const element: HTMLUListElement = document.querySelector(selector);

      element.style.animation = "none";
      element.offsetHeight; /* trigger reflow */

      setTimeout(() => element.style.animation = null, 1);

在您设置了某个间隔之后，它将应用element.style.animation = null;行

重要是要知道它支持angular && smartphone包括IOS

Answer 2

您可以在JavaScript中使用toggle切换类。

const element = document.getElementById("logo");

// in your click event
element.classList.toggle('run-animation');