使用javascript和CSS进行按钮转换，如何暂时禁用转换

Question

基本上，我有一个按钮，我想将鼠标悬停在该按钮上，然后滑动到绿色的（活动）按钮，然后将鼠标移出并滑动到看起来像是打开的灰色非活动按钮，但是它从左侧进入，我想取消此设置，以便我的按钮可以重新开始而不实际过渡到它，希望这样有意义吗？

目前，如果我过渡到第一个从左向0到左向：-210px的按钮，您会看到过渡，因为.btn-ctn上面有过渡，是否可以暂时禁用此按钮，以便按钮有效跳动，所以您不看到绿色的中间按钮？

的CSS

* {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    list-style: none;
}

body {
    padding: 20px;
}

.direction {
    width: 70px;
    overflow: hidden;
}

.btn-ctn {
    width: 210px;
    position: relative;
    left: -140px;
    -webkit-transition: left .3s ease-in-out;
}

.btn-ctn.on {
    left: -70px;
}

.btn-ctn.off {
    left: 0;
}

.btn-ctn > li {
    float: left;
    position: relative;
}

.btn {
    width: 70px;
    height: 70px;
    background: #676767;
    display: block;
}

.btn::after {
    content: '';
    width: 30px;
    height: 30px;
    border-right: 2px solid white;
    border-top: 2px solid white;
    display: block;
    position: absolute;
    top: 0; right: 15px; bottom: 0; left: 0;
    margin: auto;
    -webkit-transform:rotate(45deg);
}

.active .btn {
    background: #5cdf84;
}

.btns > li::after {

}

JS

$('.btn').on('mouseenter', function() {

    $('.btn-ctn').removeClass('off').addClass('on');

}).on('mouseleave', function() {

    $('.btn-ctn').removeClass('on').addClass('off');

    //reset to start without actually animating so if i hover over again the same animation happens as if its first time?

});

JSFiddle http://jsfiddle.net/AtZX2/2/

Answer 1

编辑我想我已经弄清楚了您现在想做什么。 您确实需要像我之前建议的那样将transition属性移动到on和off类上：

.btn-ctn {
    width: 210px;
    position: relative;
    left: -140px;
}

.btn-ctn.on {
    left: -70px;
    -webkit-transition: left .3s ease-in-out;
}

.btn-ctn.off {
    left: 0;
    -webkit-transition: left .3s ease-in-out;
}

...但是关键是要侦听webkitTransitionEnd事件，以便在完成滑动后删除off类：

$('.btn-ctn').on('webkitTransitionEnd', function(e)  { 
     $(e.target).removeClass('off');
});

此处的JSFiddle演示： http : //jsfiddle.net/AtZX2/6/

Answer 2

我创建了一个小提琴： 示例

基本上，您做得非常正确。 它唯一缺少的大事情是动画结尾处的超时：

setTimeout(function(){
    $('.btn-ctn')
        .removeClass('on off2 animated')
        .addClass('off')
}, 300);

将过渡的CSS值与JS代码同步时可能会出现问题。 考虑使用.animate在javascript中完全制作动画。 我知道它的CSS3y少了，但可以使用子弹证明。