Databases
StackOverflow2013
Postsdbo
POCSS3 transisitions / Zepto toggleClass click delay
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS3 transisitions / Zepto toggleClass click delay
    text
    copied!<p>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;</p> <p>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.</p> <p>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.</p> <p>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?</p> <p>Any help/insight is appreciated!</p> <pre><code>#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'); }) </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload