我试图通过添加一个将延迟值设置为0秒的类来禁用过渡延迟。
我现在不知道为什么它不起作用。
对我而言唯一有效的方法是添加.no-anim
类transition: none;
,但根本没有动画。
我想在单击添加类的按钮后也保留动画,因此在我的情况下,使用transition: none;
的解决方案还不够好...
任何想法?
$('.button').click(function(){
$this = $('.box');
$this.addClass('no-anim');
setTimeout(function() {
$this.removeClass('no-anim');
}, 3000);
});
.box {
width: 200px;
height: 200px;
background: #333;
transition: width .3s ease-in-out;
position: relative;
}
.box:hover {
width: 300px;
transition-delay: 2.5s;
}
.box.no-anim {
transition-delay: .3s;
}
.button {
display: inline-block;
height: 50px;
width: 30px;
background: #ff3434;
position: absolute;
right: 0;
top: 50%;
margin-top: -25px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box">
<span class="button"></span>
</div>
最佳答案
选择器.box.no-anim
的优先级与普通.box
选择器的优先级相同(它们都是类)。这意味着.box.no-anim
的:hover
pseduo-selector的添加使其具有更高的优先级,使其覆盖了您的no-anim
过渡延迟。
也将:hover
添加到您的.no-anim
选择器,它将可以正常工作。
$('.button').click(function(){
$this = $('.box');
$this.addClass('no-anim');
setTimeout(function() {
$this.removeClass('no-anim');
}, 3000);
});
.box {
width: 200px;
height: 200px;
background: #333;
transition: width .3s ease-in-out;
position: relative;
}
.box:hover {
width: 300px;
transition-delay: 2.5s;
}
.box.no-anim:hover {
transition-delay: .3s;
}
.button {
display: inline-block;
height: 50px;
width: 30px;
background: #ff3434;
position: absolute;
right: 0;
top: 50%;
margin-top: -25px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box">
<span class="button"></span>
</div>
关于html - 禁用CSS转换延迟,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38385843/