Question

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

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

唯一对我有用的是添加.no-anim类transition: none;，但根本没有动画。

我想在点击添加课程的按钮后也保留动画，所以transition: none;的解决方案在我的情况下不够好......

有什么想法吗？

＆＃13;

$('.button').click(function(){
	$this = $('.box');
	$this.addClass('no-anim');
  setTimeout(function() {
  	$this.removeClass('no-anim');
  }, 3000);
});

＆＃13;

.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;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<div class="box">
  <span class="button"></span>
</div>

＆＃13;

Answer 1

选择器.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>

禁用CSS转换延迟

1 个答案: