javascript - 使用javascript和css的按钮过渡，如何暂时禁用过渡

Question

基本上我有一个按钮，我想将鼠标悬停在该按钮上并滑动到绿色(事件)按钮，然后将鼠标移出并滑动到看起来像是打开的灰色非事件按钮，但它是从左侧进入的，然后我会我想取消这个设置，这样我的按钮就回到了开头，而没有真正过渡到它，希望这有意义吗？

目前，如果我过渡到第一个按钮，从 left:0 到 left: -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/