Javascript css重新绘制？那就做点什么

我有一个元素，我想移动动画或不动画使用css，所以如果我有

html:

我希望能够说

$（“#可能给我设置动画”）.addClass（'right'）

，并让它慢慢向右移动。 然后 我希望能够说

$（“#可能给我设置动画”）.addClass（'no-animate'）.removeClass（'right'）

，并在没有动画的情况下将其压缩回左侧

所以。。。 $（“#为我制作动画”）.addClass（'transition right'）.removeClass（'transition right'））

将使div向右设置动画，然后向左闪烁。 我很确定css渲染器不会做任何事情，因为它会等待新的事情发生。因此，在有机会渲染动画部分之前，它会注意到div已移回其原始位置，因此认为不需要麻烦

有没有办法做到这一点而不超时？我曾经考虑过在dom中添加一个新元素，并设置一个循环，以确保在继续之前它在dom中，但这似乎非常困难

一个更好的建议会非常有用 谢谢

问题在于，ID规则优先于类规则

$（'#right'）。单击（函数（）{
$（“#可能为我设置动画”）.removeClass（'no-animate'）.addClass（'right'）；
});
$（'#左'）。单击（函数（）{
$（“#可能为我设置动画”）.addClass（'no-animate'）.removeClass（'right'））
});
.parent{
高度：400px；
位置：相对位置；
背景颜色：浅灰色；
}
#也许能让我活下来{
过渡：左2秒；
位置：绝对位置；
左：30%；
显示：内联块；
高度：200px；
宽度：200px；
背景颜色：黄色；
}
#给我做动画，也许吧{
左：80%；
}
#动画-我-也许。不-动画{
过渡：无；
}

R
L
内容
多亏了SOIA

CSS3有动画事件。这样我就可以收听animationend事件

$('#animate-me-maybe').addClass('transition
   right').one('animationend', function(){
      $('#animate-me-maybe').removeClass('transition right');
})

谢谢
 使用toggleClass（）可能是工作包，然后您可以通过jquery.neato添加和删除类！当然，我想问一下，是否有一种方法可以在不添加库的情况下做到这一点：事实上，这确实给出了答案。谢谢，接得好，但不完全是我想要的。现在编辑
#animate-me-maybe{
   position: absolute;
   left: 30%;
}

#animate-me-maybe.transition{
   transition: left 2s;
}

#animate-me-maybe.right{
   left: 80%;
}

#animate-me-maybe.no-animate{
   transition: none;
}

$('#animate-me-maybe').addClass('transition
   right').one('animationend', function(){
      $('#animate-me-maybe').removeClass('transition right');
})