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

Button transition using javascript and css, how to temporarily disable the transition

本文关键字：转换 何临时 javascript 按钮 css      更新时间：2023-09-26

基本上，我有一个按钮，我想在那里悬停并滑动到绿色（活动）按钮，然后鼠标移出并滑动到看起来是打开的灰色非活动按钮，但它是从左边来的，然后我想取消这个设置，这样我的按钮就回到了开始，而没有真正转换到它，希望这有意义吗？

目前，如果我转换到从左：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?
});

JSFiddlehttp://jsfiddle.net/AtZX2/2/

EDIT我想我已经知道你现在要做什么了。您确实需要将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/

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

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

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

将转换的CSS值与JS代码同步可能会出现问题。考虑使用.animate完全使用javascript来制作动画。我知道它不那么CSS3y，但它可以防弹。

相关文章：