按钮转换使用javascript和css，如何临时禁用转换

基本上，我有一个按钮，我想悬停并滑动到绿色（活动）按钮，然后鼠标出并滑动到看起来是打开的灰色非活动按钮，但它从左侧进入，然后我想取消此设置，使我的按钮回到开始，而不实际转换到它，希望这有意义

现在，如果我从左到左转换到第一个按钮：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 {

}

$('.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?

});

JS

* {
    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 {

}

$('.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

---

编辑我想我知道你现在想做什么了。您确实需要将

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

…但关键是要监听

WebKittTransitionEnd

事件，以便在滑动完成后删除

off

类：

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

---

JSIDLE演示：编辑我想我知道你现在想做什么了。您确实需要将

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

…但关键是要监听

WebKittTransitionEnd

事件，以便在滑动完成后删除

off

类：

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

JSFIDLE演示：

我创建了一个小提琴：

基本上你做得很对。它唯一缺少的一件大事是动画结束时的超时：

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

将转换的CSS值与JS代码同步可能会出现问题。考虑在JavaScript中用<代码>完全完成动画。动画。我知道它不是CSS3y，但它可以防弹。

我制作了一把小提琴：

基本上你做得很对。它唯一缺少的一件大事是动画结束时的超时：

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

---

将转换的CSS值与JS代码同步可能会出现问题。考虑在JavaScript中用<代码>完全完成动画。动画。我知道它不是CSS3y，但它可以防弹。

嘿，不，我需要两个按钮都进行转换，但我需要最终状态在没有任何转换的情况下恢复到开始状态。我希望有比这更优雅的东西，但我没有听说过这件事@Nirazul也没有，直到我研究如何回答这个问题！这就是为什么我喜欢这样，我总是通过解决别人的问题学到很多东西。嘿，不，我需要两个按钮都进行转换，但我需要最终状态在没有任何转换的情况下恢复到开始状态。我希望有比这更优雅的东西，我没有听说过这件事@Nirazul也没有，直到我研究如何回答这个问题！这就是我如此热爱的原因，我总是通过解决别人的问题学到很多东西。