[Fixed] How to restart animation in vanilla js/ts (Angular) and support IOS

Issue

Hey guys I am try to create click bottom that user can click it and animation restart
as I understand it not possible and we need to destroy animation and readd it again.
So I try this way at first

HTML

<ul> ...

TS

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

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

and it work only on my desktop so I find another way

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");

And again it work perfectly on my desktop but I need it work on mobile as well

How can I do it? I am using Angular-9

Thanks guys!!

@AshishYadav I add a link

Solution

Hey guys after hard work I find a solution and I come to share it.

        
      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);

after you set some interval it apply the line element.style.animation = null;

It important you to know it support angular && smartphone include IOS