如何在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

谢谢你们！！

Answer 1

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

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

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