我试图通过添加一个将延迟值设置为0秒的类来禁用过渡延迟。

我现在不知道为什么它不起作用。

对我而言唯一有效的方法是添加.no-animtransition: 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/

10-12 00:17
查看更多