Css Keyframe animation on click is added and removed only once

JavaScript
1

This seems to be a CSS issue, not so much a JS problem.

I have added all the JS fixes I could find online, there are no JS errors thrown in any console, and what is worst, this stuff ran in IE10 and 11 before I made the animations very simple.

The idea is simple to make the divs fly in when clicking the LI and to make them fly out when clicking the home button.

It works exactly as intended on desktop, but not on the mobile chrome and stock android browser, the last 2 will not animate the fly in more than once.

This works on FF, Chrome, should work in IE(it did before, canot test until tomorow).

Try this on an Android mobile, click on a list item, the corresponding ding will fly into position and fly out, but each div will do this only once.

The code is all inlined, it’s a small site, the keyframes css is from roughly line 100-450, the JS is at the bottom.

I have added the following “hacks”:

  • all keyframes start from 0%(or “from”) and end at the 100% value, this is apparently a must do
  • the adding classes in JS happens with a tme out and sets the offset, to trigger a reflow inbeteen.

IT worked slightly better before, even with 3d options in the keyframes, I simply cannot find a solution to this.

Website is live

Thank you guys

2

HI,

This seems to be a js problem as I can see in the developer tools that on the iphone the classes toRight and fromRight are not being removed from the element so the animation never occurs a second time.

I added a line of jquery ($(‘#’ + theId).removeClass(‘toRight’);// added this) to the flyIn and flyout functions and now it works.

function flyIn(theId, cName1, cName2) {
  var el = document.getElementById(theId);
  var menu = document.getElementById('about');
  var overlay = document.getElementById('overlay');
  var header = document.getElementById('header');
  var icon = document.getElementById('icon');

 $('#' + theId).removeClass('toRight');// added this
 
  if (el.classList) {
    setTimeout(function() {
      el.classList = "";
    }, 2);
  } else {
    setTimeout(function() {
      el.className = "";
    }, 2);

  }   // etc.......

and then added this ‘$(’#’ + theId).removeClass(‘fromRight’)’ to the flyOut function:

function flyOut(theId, cName1, cName2) {
  var el = document.getElementById(theId);
  var menu = document.getElementById('about');
  var overlay = document.getElementById('overlay');
  var header = document.getElementById('header');
  var icon = document.getElementById('icon');
  
  $('#' + theId).removeClass('fromRight');// added

  if (el.classList) { etc.....

I guess its some problem with classList but as js isn’t my area you will need to check in the JS forum. I’ll move the post there now.

3

Hi Paul,
Thanks for this, but it still does not work, it worked on everything cept the stock android browsers.

As I type, I am rewriting the flyIn and out function in “pure” Jquery:sweat_smile:

I always try Js first and use jquery as fallback when all else fails, and this is a hard case, same thread is in the Css section as well, with more information and a codepen.

This really is a nightmare, I have had it working on most browsers but never on all.

But yeah trying a jquery function now, might work, there is so much wrong with the stock android browser, its the new IE:blush:

4

I don’t have android to test on unfortunately but I can tell you it wasn’t working on my iphone or on the mac simulator (which is more or less 100% accurate). The fix I gave above makes it work on the simulator as I copied the whole page locally for testing and indeed changing the classes on the fly on the real device in dev tools made it work also.

It doesn’t look as though you have added my fix anyway as the live site is still not working on the iphone or simulator.

I;m guessing the android issue is related to the above but I have no means to test. It certainly is a class issue on the iphone because I can see that the classes are not being swapped and removed in dev tools.

Hope that helps.

5

Ah sorry for the live site, I was trying things out directly on the server, I had tried your approach, I have also rewritten the whole function in Jquery, never got it to work, so I have choosen the cop out approach, did it all with the jquery animate method:grin:
Btw, I have liked the spirit of your idea, jquery within a JS function declaration:sunglasses:

I always try JS in vanilla first, and if something is too buggy, I go with jquery, it’s still a reality, but it’s still good to understand the JS behind it imo.
When it’s all said and done, it is the most consistent front end animation tool, and not too bad for performance on average size sites.
It works now, check the function in the source code, I have learned to go for this easy approach from the getgo now, everything else costs too much time.
While people say css is consistent across browsers, lol, it’s not, often even something trivial in IE10 and 11 simply will not work, even the creator of the animate IT CSS framework has said you can forget about browsers like the stock Android as far animations go, he advises browser sniffing and adding an Android CSS stylesheet:smiley:
One more thing, the animation libraries or frameworks, like greensock, are just not worth the 1 or 2 extra server requests, I have done some sites with them, spectacular stuff and very solid cross browser, but the more content and interactivity on a site, the more it lows everything down.
Sorry the code went through many stages since I had posted this question, it would just not let me rest before fixed.
There are many tutorial sites and even “plugins” out there which don’t work in the critical browsers, these tuts are fine, but when you have to stand in front of a client and they tell you “this has to work in all browsers, I don’t care if its a difficult browser”. This is the wake up moment where all those tuts fly out of the window and I have realized to keep things as simply as possible.

That said, let me know if it’s now functional on the ios devices, which I cannot test live, only on simulators, pleasure talking to you:sunglasses:

6

Yes its working on my iphone now and on the simulator albeit in a slightly different manner to before.

I do notice that if you click to close the hamburger icon once you have viewed a selection (say prices) then that prices page stays where it is and if you then select another item the prices page is still there while the new page slides over the top.

It’s not the same as if the user had clicked home on the prices page. Therefore it seems to me that you need to trigger the animation when the hamburger is closed also.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.