javascript - CSS transitions for content loading -

i'm implementing animations on html5 project css3 , far good. can do, example:

#somedivid {     position: absolute;     background:rgba(255,0,0,0.75);     transition: 0.7s ease-in-out;     -moz-transition: 0.7s ease-in-out;     -webkit-transition: 0.7s ease-in-out;     -o-transition: 0.7s ease-in-out; }    #somedivid:hover {     background:rgba(255,0,0,1); } 

and change opacity of red div 0.75 1. work other properties of div on hover too, color attribute or border-radius.

my problem comes attributes changed automatically when manipulate dom javascript, change in height or width happens when src added img or if content added div.

for image case, have folowing css:

.someimageclass {     border-color: white;     border-width: 15px;     border-style: solid;     max-height:370px;     max-width:370px;     transition: 0.7s ease-in-out;     -moz-transition: 0.7s ease-in-out;     -webkit-transition: 0.7s ease-in-out;     -o-transition: 0.7s ease-in-out; } 

and image loaded dom dynamically javascript:

var image = document.createelement("img"); image.src = somesourceurl; image.classname = "someimageclass"; document.getelementbyid("somediv").appendchild(image); 

at first image appears square on container div. when img not done loading it's content, looks this:

but when content src loaded, looks this:

i no animations between states.

there @ least 2 changes of size img identify, 1 being nothing (no size, no style) , having style applied (some size depending on style) , second being node no content margin , size 1 content loaded , new size. i'm more concerned second one, , i'm not sure if first 1 technically happens.

is there way handle kind of size changes triggered manipulation of content of node css selectors , transitions?

you should add css class name once image appended in side div.

you can achieve using settimeout function.

var image = document.createelement("img"); image.src = someimageclass; document.getelementbyid("somediv").appendchild(image); settimeout(function(){     image.classname = "someimageclass"; },1); 

or in jquery

$('#somediv').html('<img src="' + someimagepath + '" />'); settimeout(function(){     $('#somediv img').addclass("someimageclass"); },1);