CODEWITHSUNDEEP
jquerycsscss-transitionstransitiontoggleclass
UzumakiDev
UzumakiDev

Reputation: 1276

Why does this toggleClass not work?

I have a button:

<div id="headBtn">      
</div>

I have a class:

.slideout {
  -webkit-transform: translate3d(265px, 0, 0);
  position:absolute; left:0;
  transition: -webkit-transform .5s ease;
}

I have a function:

$('#headBtn').on('click',function(){
    var wrap = $('#wrapper');
    wrap.toggleClass('slideout');
});

The aim is to have my #wrapper element move to the right using webkit-tansform, I then want to toggle that css so it snaps back to the left again.

Right now the #wrapper element does snap back to the left for a second but it moves to the right again, as if the css is removed but then applied again.

Any ideas why this is happening?

Upvotes: 0

Views: 448

Answers (1)

Alex W
Alex W

Reputation: 38213

It's because when you are removing the class, you are removing the CSS transition defined in it. If you apply that transition to all elements, it still works when you remove the class:

.slideout {
  -webkit-transform: translate3d(265px, 0, 0);
  position:absolute; left:0;
}
* {
  transition: -webkit-transform .5s ease;
}

http://jsfiddle.net/6Eq4B/

Upvotes: 1

Related Questions