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

【问题标题】：Button transition using javascript and css, how to temporarily disable the transition使用 javascript 和 css 的按钮过渡，如何暂时禁用过渡
【发布时间】：2013-08-17 00:17:03
【问题描述】：

基本上我有一个按钮，我想悬停并滑动到绿色（活动）按钮，然后将鼠标移出并滑动到看似打开的灰色非活动按钮，但它从左侧进入，然后我会想取消这个设置，让我的按钮回到开始，而不是真正转换到它，希望这有意义吗？

目前，如果我转换到第一个按钮从 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 {

}

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

【问题讨论】：

标签： javascript jquery css css-transitions

【解决方案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/

【讨论】：

嘿，不，我需要两个按钮都发生转换，但我需要最终状态恢复到初始状态而不进行任何转换
我希望有比jsfiddle.net/AtZX2/2更优雅的东西@
很好，没听说过这个活动！
@Nirazul 我也没有，直到我研究了如何回答这个问题！这就是为什么我喜欢 SO，我总是通过解决别人的问题来学习很多东西。

【解决方案2】：

我创建了一个小提琴：Example

基本上你做的很对。唯一缺少的就是动画结束时的超时：

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

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

【讨论】：