为什么此toggleclass不起作用

Question

我有一个按钮：

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

我有一个课程：

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

我有一个功能：

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

目的是让我的#wrapper元素使用webkit-tansform移动向右移动，然后我想切换该CSS，以便再次向左捕捉。

现在，#wrapper元素确实在左侧捕捉一秒钟，但它再次向右移动，好像CSS被删除，然后再次应用。

有什么想法为什么会发生这种情况？

Answer 1

这是因为当您删除类时，您正在删除其中定义的CSS过渡。如果您将该过渡应用于所有元素，则在删除类时仍然有效：

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

http://jsfiddle.net/6eq4b/