Question

If I have a css style that is the following:

.transition {
    transition: left linear .4s;
    -moz-transition: left linear .4s;
    -o-transition: left linear .4s;
    -webkit-transition: left linear .4s;
}

and the following html:

<div id="mydiv">Test</div>

and the following jQuery:

$(function () {
    $('#mydiv').css('left', '50px');
    $('#mydiv').addClass('transition');
});

then there is still a transition from 0px to 50px when the page loads, despite the fact that the transition class is not added to mydiv until after the css left property is set in jQuery.

I would like to be able to set the initial css left property of mydiv when the page loads (it is calculated based on various parameters) and not be animated, yet still have the transition property set for after the initial page load (moving mydiv after the page loads should be animated).

How can I accomplish this?

Answer 1

You could apply the position on dom ready, and the transition on page load. Try out this fiddle.

$(function () {
    $('#mydiv').css('left', '50px');
});

$(window).load(function(){
    $('#mydiv').css('left', '100px');
    $('#mydiv').addClass('transition');
});

You need to have a separation between applying the two styles. You could accomplish the same effect with a setTimeout.