Disable CSS transition delay - html

Question

I'm trying to disable the transition delay by adding a class that put the value of the delay to 0 seconds.
I don't now why it doesn't work.
The only thing that worked for me was to add the .no-anim class transition: none; but than there is no animation at all.
I want to keep the animation also after clicking the button that add the class so the solution with the transition: none; is not good enough in my case...
Any idea?
$('.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>

Answer 1

The selector .box.no-anim has the same precedence as a plain .box selector (they're both just classes). That means that .box.no-anim's addition of the :hover pseduo-selector is giving it a higher precendence, making it override your no-anim transition-delay.
Add :hover to your .no-anim selector as well and it will work correctly.
$('.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>