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


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


<ul> ...


    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


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


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

      // -> removing the class
      // -> and re-adding the class

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


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

Leave a Reply

(*) Required, Your email will not be published