使用JavaScript和css的按鈕轉換，如何暫時禁用轉換

基本上我有一個按鈕，我想要懸停並滑動到綠色（活動）按鈕，然後將鼠標移出並滑動到看起來是開始的灰色無效的按鈕，但它從左邊進來，然後我想取消這個設置，所以我的按鈕在開始時沒有實際轉換到它，希望這是有道理的？使用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? 

});

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

來源

2013-08-16 styler

編輯我THI我知道你現在想要做什麼。你需要的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/

來源

2013-08-16 15:57:26 metadept

嘿沒有我需要的轉變發生了兩個按鈕，但我需要的最終狀態恢復到開始的狀態，沒有任何過渡 – styler

我希望的東西稍微更優雅比這http://jsfiddle.net/AtZX2/2/ – styler

希望我的更新答案是解決正確的問題:) – metadept

我創建了一個小提琴：Example

基本上你做得很對。唯一的一件大事，它缺乏，在動畫的最後超時：

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

有可能是synching與JS代碼過渡的CSS值的問題。考慮完全在JavaScript中使用.animate完成動畫。我知道這不是CSS3y，但它會起到防彈作用。

來源

2013-08-16 16:13:02 nirazul

使用JavaScript和css的按鈕轉換，如何暫時禁用轉換

回答

相關問題