CSS3 transisitions / Zepto toggleClass click delay

Question

I'm experimenting using Zepto animate and CSS3 transitions for animating a div to the left and back again on button click. For this I'm using toggleClass which adds and removes a class with styling of margin-right:-0;

All is working but I'm experiencing a very slight delay on mobile devices when clicking the button to toggle the class. I've got it working using animate with no delay but CSS3 transitions are hardware accelerated so I was hoping to make the animation slightly smoother.

Essentially when I click the button to toggle the animation there is a very slight pause before it fires, I want to get rid of this.

Code is below, anyone got any ideas why I'm getting this slight delay? My guess would be that it's to do with how quickly a class can be toggled and its styling read?

Any help/insight is appreciated!

#side-menu {
    float: right;
    height: 100%;
    width: 80%;
    overflow: scroll;
    margin-right:-1024px;
    box-shadow: 4px 0 5px #484848 inset;
    -webkit-box-shadow: 4px 0 5px #484848 inset;
    -moz-box-shadow: 4px 0 5px #484848 inset;
    background: linear-gradient(#444444, #333333) repeat scroll 0 0 #595858;
    background: -webkit-linear-gradient(#444444, #333333) repeat scroll 0 0 #595858;
    background: -moz-linear-gradient(#444444, #333333) repeat scroll 0 0 #595858;
    background: -o-linear-gradient(#444444, #333333) repeat scroll 0 0 #595858;
    -webkit-transition: margin-right 1s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transform: translateZ(0);
}

.sideMenuToggle{margin-right: 0 !important;}




$('#menu_toggle').on('click', function(){
    $('#side-menu').toggleClass('sideMenuToggle');
})

I am just guessing about it, so probably wrong. Is the menu still visible when you begin the transition. May be the -1024px are setting it, not only out of sight, but far away out of sight, and it needs some time to get to the border of the screen ? By the way, you are trying to get GPU acceleration with -webkit-transform, but it's useless to set 2 properties for that, only one will be applied. — vals

CourtDemone CourtDemone · Accepted Answer · 2013-09-05T21:28:01

It's most likely what vals said: The menu is way out of sight, instead of just a little out sight. To fix it, you should be able to change to margin-right: -80%. That way, margin-right is the same as width, and it will be just out of view.

Now padding, borders and shadows may cause it to still be showing a bit. You can handle the first two by changing your element to box-sizing: border-box which will make it so width means the total width, padding and borders included, and their sizes will subtract from the full element size. Learn more about that here:

http://css-tricks.com/box-sizing/

The box shadows however will still be showing. So, animate them too! Add transition: box-shadow 1s and start with box-shadow: 4px 0 5px rgba(0,0,0,0) and then add box-shadow: 4px 0 5px #484848 to your sideMenuToggle class.

Hopefully that helps!

(PS None of this was tested, so I'm not even sure if you can animate box-shadows. You should be able to, though you may need to convert #484848 to a RGBA value for it to work.)

CSS3 transisitions / Zepto toggleClass click delay

1 Answers