Question

I realise that CSS transitions always apply to the class that’s been added, not removed. But I’m wondering if there is an elegant solution to my problem. I have a set of boxes, when hovered, they transition into a circle. When a button is pressed, they grow/shrink.

I’d like them to grow and shrink slowly, but turn into a circle/square quickly.

At the moment, they grow and shrink slowly, turn into a circle quickly, but turn back to a square slowly again. This is of course because the CSS transition duration for the boxes is set to the slow speed, and so when the circle class is removed, they revert back to the original speed. I have come up with a working solution (not included here) that uses setTimeout to add a “quick speed” class for a moment and take it away. It does solve the issue but it feels very ugly to me.

Have you guys ever come across this issue and thought of a better way? Or is this just beyond the scope of CSS transitions?

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

It can be done using CSS3 alone. All you need to do is move all transitions to the .box rule, like this:

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