Help using CSS3 translate3d with bootstrap accordion

HTML & CSS
1

Hi all

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…

.panel .panel-collapse {
  transform: translate3d( 0, 0, 100px ); /* X, Y, Z */
  -webkit-transform: translate3d( 0, 0, 100px );
}

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.

Thanks, Barry

2

Can anybody help with this?

I’ve tried adding:

.panel .panel-collapse .collapse {
    transition: transform .25s ease-in-out;
    -webkit-transition: -webkit-transform .25s ease-in-out;
}

Nothing?

What I’ve found is the JS is already changing the classes and alternates between

<h4><a href=“” class=“collapsed”></h4> - When clicked collapsed is removed.

<div class=“panel-collaspe [here]”>

collaspe
collasping
in

Thanks, Barry

3

Hi,

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.


h4 a {
    display:block;
    position:relative;
    z-index:2;
}
.panel .panel-collapse {
    /*transform: translate3d( 0, 0, 100px );
    -webkit-transform: translate3d( 0, 0, 100px );*/
}
h4{
 margin:0;
position:relative;
}

h4 i.indicator{
 position:absolute;   
 float:none;
 top:5px;
 right:5px;
 z-index:1;
}

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.

4

Thanks Paul

I have a menu working taken from this example - http://apeatling.com/2014/building-smooth-sliding-mobile-menu/
Should give you an idea of what’s happening and what I’m trying to do, and how transform: translate3d is used.

The classes are already being applied in our example, I was just hoping some how we could add the CSS translate to work in the same way.

If you get chance to have a look appreciated thanks.

Barry

5

Hi,

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. :slight_smile:

6

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 (:

Thanks again Paul.

Barry

7

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.

8

Hi,

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 1: Basic Jquery but has delay on ipad.

Version 2: Basic Jquery but has no delay on ipad. It uses this routine for touchstart.


$(document).on('touchstart click', '.myElement', function(event){
        event.stopPropagation();
        event.preventDefault();
        if(event.handled !== true) {

            // code here

            event.handled = true;
        } else {
            return false;
        }
});

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 :slight_smile: (Perhaps a question for the JS forum to confirm.)

9

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 :slight_smile:
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.

(Perhaps a question for the JS forum to confirm.)

I think your right, going way of CSS here :cool:

Some good information here, thank you!

Chat soon,
Barry

10

I’ve now added the extra click to hide things in the third example. :slight_smile:

11

Perfect! :smiley: