Comment avoir un élément css avec des transitions excepté?

Si j’ai un style css c’est ce qui suit:

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

et le code HTML suivant:

 
Test 

et le jQuery suivant:

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

il y a toujours une transition de 0px à 50px lors du chargement de la page, bien que la classe de transition ne soit ajoutée à mydiv qu’après le paramétrage de la propriété css left dans jQuery.

• Les transitions CSS ne s’exécutant pas en même temps
• Transitions CSS ne fonctionnent pas à moins d’ utiliser délai d’ attente
• Fondu dans le contenu généré dynamicment avec Bootstrap 3
• jQuery Waypoints Rafraîchir avec la transition CSS
• Comment animer des éléments avec les transitions css3 après avoir caché un élément

Je souhaite pouvoir définir la propriété initiale css left de mydiv lors du chargement de la page (calculée en fonction de divers parameters) sans être animée, tout en maintenant la propriété de transition définie pour après le chargement de la page les chargements de page doivent être animés).

Comment puis-je accomplir cela?

• Comment arrêter la transition CSS3
• Système alternatif CSS à la maçonnerie
• Effet Transitions du carrousel de hiboux ne fonctionnant pas après la dernière mise à jour de Chrome (V36)
• Transition CSS3 pour mettre en évidence les nouveaux éléments créés dans JQuery
• Désactiver les transitions CSS au chargement de page uniquement

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