Переходы CSS, разные длительности с тем же свойством?

Question

Я знаю, что вы можете установить разные длительности для разных свойств с переходами CSS. Но можно ли установить разные длительности для того же?

Пример: Я хочу, чтобы коробка расти/сокращаться по ширине длины Я быстро при наведении/выход мыши, но расти/сокращаться по ширине длиной B медленно при нажатии кнопки, используя другой класс.

Вот пример:

http://jsfiddle.net/VDyPG/7/

На данный момент коробка только растет быстро, когда парил, она сжимается медленно при выходе мыши. Конечно, это ожидается, так как класс .box имеет скорость медленной продолжительности, но есть ли способ обойти это? Я разработал хакерский способ сделать это с setTimeout и дополнительным «быстрым» классом, но было бы прекрасно, если бы был более элегантный способ.

Примечание: Я знаю, что это можно сделать с помощью jQuery. Я действительно ищу его, чтобы работать с CSS, однако, поскольку фактическая проблема, с которой я сталкиваюсь за пределами этого изолированного примера, - это 3D-преобразования. Это было просто для примера. :)

CSS:

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

.lengthA 
{ 
    width: 300px; 
    -webkit-transition-duration: 0.2s; /* Can this be used when class removed? */ 
} 

.lengthB { 
    width: 500px;  
} 

JQuery:

$('.box').on('mouseenter', function() { 

    $(this).addClass('lengthA');    

}) 

$('.box').on('mouseleave', function() { 

    $(this).removeClass('lengthA');    

})  

$('.makeBig').on('click', function() { 

    $('.box').toggleClass('lengthB');    

}) 

HTML:

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

Answer 1

Я считаю, что вы можете с помощью ва Этот способ: http://css-tricks.com/different-transitions-for-hover-on-hover-off/. Я нахожусь на своем iPad прямо сейчас, так что это не пример, но суть в том, что вы устанавливаете другой переход на псевдо-селектор наведения.

Если вы хотите использовать JQuery, то вы можете связать с преобразованным событие, чтобы узнать, когда предыдущий переход завершенным, то стоит отметить, что именование не соответствует -

Вы хотите использовать что-то вроде:

$("div").bind("webkitTransitionEnd oTransitionEnd msTransitionEnd transitionEnd transitionend", function(){ 
  //code 
}); 

Как кажется, Firefox использует переход, а не правильный переходEnd.

Answer 2

Вы имеете в виду, как это ?:

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

<style type="text/css"> 
    .box { 
     width: 100px; 
     height: 100px; 
     margin: 10px; 
     background: red; 
     -webkit-transition: width 250ms ease; 
    } 
    .box:hover { 
     width: 500px; 
    } 
    .box.slow { 
     width: 500px; 
     -webkit-transition-duration: 2s; 
    } 
</style> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(".makeBig").on("click", function() { 
     $('.box').addClass("slow"); 
    }) 
</script>