提问者:小点点

如何在vanilla JS/TS(Angular)中重启动画并支持IOS


嘿,伙计们,我正在尝试创建点击底部,用户可以点击它和动画重新启动,因为我理解这是不可能的,我们需要销毁动画和重新读取它。所以我一开始试着用这种方法

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

谢谢你们!!


共1个答案

匿名用户

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

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

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