jQuery addClass method chaining to perform CSS transitions

Question

What I would like to do (broke):

go
         


        

Answer 1

"CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration."

1st Scenario posted :

In order to have the css transition to work, you need to specify the css property to the element on which you want to do the transition. In your example, you are doing a transition on the left property but it's initial value is not defined in the div css.

In order to fix it, just add left property.

div {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: red;
    left: 0px;
}

Working example : http://jsfiddle.net/0bm4wq7h/14/

2nd scenario posted vs 3rd scenario posted:

Even though both examples doesn't have left property defined for the div, the reason why the 3rd scenario works as compared to the 2nd scenario is because of the delay caused by console.log.

In the first statement,

$('div').css({
        'transition': 'left 1000ms'
    }).addClass('left');

class left is added to the div element, which internally adds the left property. But adding the console.log($('div').css('left') invokes window.getComputedStyle ( as mentioned by Stryner ) which registers the computed value and adding $('div').addClass('left_more'); basically gives it an opportunity to perform the transition from left : 100px to left : 600px.