html - 禁用 CSS 过渡延迟

Question

我试图通过添加一个将延迟值设置为 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>

Answer 1

选择器 .box.no-anim 与普通的 .box 选择器具有相同的优先级(它们都只是类)。这意味着 .box.no-anim 添加的 :hover 伪选择器赋予它更高的优先级，使其覆盖你的 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>