I’ve setup a bootstrap accordion, works ok though very slow on click and seems very sluggish. I recently read an article that helped me with a mobile menu using CSS3 transform: translate3d. Works great, rapid very quick with a native app feel.
I’m wondering how and where I can add the translate3d to the accordion so it works in a similar way?
I was thinking if we add, but nothing happens, am I missing something?
Not even sure if I’m targeting the right element…
A demo of the accordion in action - http://jsfiddle.net/R6EAW/676/
It might seem ok at first, though on mobile very slow with a what seems like a click delay of 1-2 seconds, and very jagged.
Can anybody help adding the translate3d to the CSS and markup?
Or any guidence.
You aren’t really doing anything with that css and anyway you would need to remove the jquery anyway or you would still get the js working in tandem with it. CSS3 doesn’t animate to height:auto anyway which is what you want (although there are some workarounds for this).
The jquery animations don’t like margins and usually its margins that cause the jump. If you change the CSS in your fiddle to the following it is much smoother.
I also removed the floated chevron and placed it absolutely because your following div wouldn;t have cleared the float and would also add to the jump.
For a much smoother animation in jquery you might want to look at adding velocity.js which is very smooth but you would need to do your own custom slideUp and downs for the accordion which shouldn’t be to hard.
The menu you link to is not using jquery for its animation but a custom js that is just adding classes and checking for the transition end. In your example you would need to remove the jquery accordion functions and program the menu the same as that other example. There’s no use using the jquery classes that are added because the jquery will still handle the animation even if you have the css animation working.
Also that example slides a menu a fixed amount of pixels which you can’t do for your accordion because a) it needs to be in the flow of the document and b) you don’t know the height and setting a height would be bad. As I said before CSS can’t animate to height:auto anyway so is not really much use to you.
Try the changes I gave you as it makes the menu much much smoother but if it is still jerky on a mobile then try the velocity plugin. Otherwise look for a custom accordion plugin rather than trying to write your own.
The menu you link to is not using jquery for its animation but a custom js that is just adding classes and checking for the transition end.
Custom jQuery functions, its jQuery that makes everything work in the menu example (unless I’m mistaken). In our example its the bootstrap.js thats doing the work (external resources in jsfiddle) which has all the hooks/classes for the accordion.
There’s no use using the jquery classes that are added because the jquery will still handle the animation even if you have the css animation working.
Yes I understand, I think I’ll need to remove the bootstrap library and rely on jQuery if I want to customise like the menu example.
Also that example slides a menu a fixed amount of pixels which you can’t do for your accordion
I realised this as I was writing the first post, was going to bring this up once we had a fix.
Try the changes I gave you as it makes the menu much much smoother but if it is still jerky on a mobile then try the velocity plugin. Otherwise look for a custom accordion plugin rather than trying to write your own.
I’ve already tried this, still jerky on mobile not much difference.
The main problem is the latency of the click, seems like forever before the animation kicks in.
I’ll have a look at velocity was just hoping not to use more JS considering we already have a couple of frameworks in place.
Will do a bit of testing see what I can come up with. Been working on this all last night (:
Bootstrap js use jquery for its animations I believe.
I’ve already tried this, still jerky on mobile not much difference.
The main problem is the latency of the click, seems like forever before the animation kicks in.
That would happen with a CSS only menu also because mobiles wait for a double tap first and if it doesn’t happen then they action the tap. There’s a Sitepoint article here that mentions the issue and possible solutions.
I’ve just knocked up a quick accordion that is very simple and uses a touchstart method that is widely discussed around the web and seems to work well on an ipad at least.
Version 3: Same as version 2 above but adds velocity.js to provide much smoother animation on desktop and mobile.
I can’t confirm whether this works for all mobile devices as I only have an ipad to test on at the moment or whether the touchstart routine is flawed as I just grabbed it form other discussions around on similar topics (Perhaps a question for the JS forum to confirm.)
For a much smoother animation in jquery you might want to look at adding velocity.js
Been playing around in the codepen playground with this, lots of great examples. I think I’m sold
Some great menus and other little useful bits. An extra 8kb with talks of a standalone version (meaning no jQuery dependency).
Bootstrap js use jquery for its animations I believe.
Yes Bootstrap needs jQuery to do most of the heavy lifting.
I’ve just knocked up a quick accordion that is very simple and uses a touchstart method that is widely discussed around the web and seems to work well on an ipad at least.
Haven’t tested on iPad nice to know. I’ve been doing all my work/testing on iPhone 5.
Thanks for taking the time and examples regarding the different versions.
I’ve tested all three on my iphone - Version 3 is the best, like you say, similar to version two though you can definitely the the improvement after adding velocity.js - Just need to add another click so things hide.
I can’t confirm whether this works for all mobile devices as I only have an ipad to test on at the moment or whether the touchstart routine is flawed
I worked on some touchstart stuff some time back, but again, iphone. You can never really know until you have the proper devices, emulators are never 100% accurate, from past experience anyway.