0

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

Lichay Tiram
  • 283
  • 3
  • 12
  • Can you attach a working demo with your issue because it's animation stuff and it would really help us to analyze. – Ashish Yadav Mar 22 '21 at 14:57
  • I did this https://www.youtube.com/watch?v=sVZX0XvEBhk&t=892s in my project – Lichay Tiram Mar 22 '21 at 15:21
  • Your example could would have been better. Can you try to upload it on platform like CodeSandbox? – Ashish Yadav Mar 22 '21 at 15:25
  • I see you are using reading an offsetHeight as an endeavour to force a reflow before you set the animation again. This [link] https://stackoverflow.com/questions/60361968/why-does-reading-dom-measurements-trigger-a-layout-reflow has some discussion which seems to indicate that Safari behaviour could be different from Chrome/FF. – A Haworth Mar 22 '21 at 16:43
  • Are you using angular? This is not how animations should be used in Angular – Owen Kelvin Mar 22 '21 at 16:46
  • Yes I am using Angular, and try both approach and they work only on my pc – Lichay Tiram Mar 22 '21 at 16:57
  • I try too but on this website have a lot of bugs https://codesandbox.io/s/relaxed-goldberg-6ivno?file=/src/app/app.component.css – Lichay Tiram Mar 22 '21 at 19:27

2 Answers2

0

You can use toggle to toggle the class in JavaScript.

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

// in your click event
element.classList.toggle('run-animation');
Ashish Yadav
  • 1,901
  • 2
  • 17
  • 23
  • If I add this after 'element.classList.add("run-animation");' nothing work and If I use it before it do nothing again on mobile it not working only desktop – Lichay Tiram Mar 22 '21 at 15:19
  • You need to replace your `classList.add` and `classList.remove` and use the above code. Toggle adds / removes class. – Ashish Yadav Mar 22 '21 at 15:24
  • Toggle does remove/add classes but there would then be nowhere for the code to try to force a reflow, AFAIK. – A Haworth Mar 22 '21 at 16:44
  • That's why I was requesting for the OP's implementation so that we can properly analyze and apply the reset. For now, I am assuming that the class has all translation and it just resets back when the class is removed, keeping things back to normal. – Ashish Yadav Mar 22 '21 at 16:56
  • When I delete classList.add and classList.remove I need to do 2 clicks and it work (first to stop and second to play) but when I delete classList.remove it doesn't work – Lichay Tiram Mar 22 '21 at 17:01
  • please help it doesn't work on smartphone only on PC – Lichay Tiram Mar 24 '21 at 12:39
  • @LichayTiram It does work in mobile too but the way you are expecting results in mobile are different. The hover equivalent in touch devices are `touchstart` & `touchend` you need to touch the slider to pause it and touch outside somewhere to restart it. You cannot hover similar to the desktop. Hover are for devices that support mouse. – Ashish Yadav Mar 24 '21 at 13:48
  • I know it, the focus should be on button that doesn't work on mobile (You can upload website to production and see it yourself - Angular) – Lichay Tiram Mar 24 '21 at 14:58
0

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

Lichay Tiram
  • 283
  • 3
  • 12