CSS 전환 지연 사용 안함

Question

지연 값을 0 초로 설정하는 클래스를 추가하여 전환 지연을 비활성화하려고합니다.

지금은 작동하지 않습니다.

나를 위해 유일한 것은 .no-anim 클래스 transition: none;을 추가했지만 전혀 애니메이션이없는 것입니다.

나는 transition: none;과 솔루션은 내 경우에는 충분하지 않습니다 있도록 클래스를 추가 버튼을 클릭 한 후도 애니메이션을 유지하려는

...

어떤 생각?

$('.button').click(function(){ 
 
\t $this = $('.box'); 
 
\t $this.addClass('no-anim'); 
 
    setTimeout(function() { 
 
    \t $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 pseduo-selector가 추가되어 더 높은 우선 순위를 갖게되어 no-anim 전환 지연보다 우선합니다.

또한 .no-anim 선택기에 :hover을 추가하면 제대로 작동합니다.

$('.button').click(function(){ 
 
\t $this = $('.box'); 
 
\t $this.addClass('no-anim'); 
 
    setTimeout(function() { 
 
    \t $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>