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;
}