CSS 전환 기간을 두 가지 방법으로 수행 할 수 있습니까?

Question

CSS 전환은 항상 추가 된 클래스에 적용되며 제거되지는 않습니다. 하지만 내 문제에 우아한 해결책이 있는지 궁금 하네. 나는 한 세트의 상자를 가지고 있는데, 그 상자가 끌릴 때 원으로 바뀐다. 버튼을 누르면 확대/축소됩니다.

천천히 자라고 싶지만 천천히 원/정사각형으로 바꾸고 싶습니다.

지금은 천천히 자랍니다. 으로 천천히 원을 그리며 다시 천천히 광장으로 돌아 가세요. 물론 이것은 상자의 CSS 전환 지속 시간이 느린 속도로 설정되어 있으므로 원형 클래스가 제거되면 원래 속도로 되돌아갑니다. 나는 "빠른 속도"클래스를 추가하고 제거하기 위해 setTimeout을 사용하는 실제 해결책 (여기에 포함되지 않음)을 생각해 냈습니다. 그것은 문제를 해결하지만 그것은 나에게 매우 못 생겼다고 느낍니다.

혹시이 문제를 접하면서 더 좋은 방법을 생각해 봤습니까? 아니면 CSS 전환의 범위를 넘어서는 것입니까?

CSS :

.box { 
    background: red; 
    width: 100px; 
    height: 100px; 
    margin: 10px; 
    -webkit-transition: all 2s; 
} 

.big { 
    width: 300px;  
} 

.circle { 
    background: blue; 
    border-radius: 50px; 
    -webkit-transition-duration: .5s; 
} 

jQuery를 :

$('.box').on('mouseenter', function() { 
    $(this).addClass('circle');    
}) 

$('.box').on('mouseleave', function() { 
    $(this).removeClass('circle');    
})  

$('.makeBig').on('click', function() { 
    $('.box').toggleClass('big');    
}) 

HTML :

<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<button class="makeBig">Grow!</button> 

jsFiddle :

http://jsfiddle.net/VDyPG/1/

Answer 1

그것은 혼자 CSS3를 사용하여 수행 할 수 있습니다. 당신이해야 할 모든이처럼 .box 규칙에 모든 전환을 이동할 수 있습니다 :

.box { 
    background-color: red; 
    width: 100px; 
    height: 100px; 
    margin: 10px; 
    -webkit-transition: width 2s, border-radius .5s, background-color .5s; 
} 

.big { 
    width: 300px;  
} 

.circle { 
    background-color: blue; 
    border-radius: 50px; 
} 

Answer 2

Sófka이 정답을 가지고 있지만, 나는 오히려이 일을보다가를 추가 할 :

$('.box').on('mouseenter', function() { 
    $(this).addClass('circle');    
}) 

$('.box').on('mouseleave', function() { 
    $(this).removeClass('circle');    
}) 

당신은 할 수 있습니다 **, 렌더링 결과가 아니라 (`circle``대 slow`)이 ** 실행 동작의 설명에 해당 클래스 이름을 지정하여 더 의미 적 문제를 해결하기 위해

$('.box').hover(function() { 
    $(this).addClass('circle'); 
}, function() { 
    $(this).removeClass('circle'); 
});