jquery - webKit Transitions on Dynamic DOM Element -

i css file define div class transitions:

div.blackout {  -webkit-transition-property: opacity;     -webkit-transition-duration: 2s; } 

then, in javascript add dynamic dom element (via jquery):

var cssobj = {    'background-color' : '#000',    'width' : '100%',    'height' : '400px',    'position' : 'absolute',    'top' : 0,    'z-index' : '9998'   }; var element = $("<div>").css(cssobj).addclass('blackout').appendto( 'body' ); element.get(0).style.opacity = 0; 

but transition doesn't start!

why?

i running same problem, , found transformations occur, transition not run - no animation. appears if try execute transitions before element in dom, ignore transitions - while still executing transformation. don't know enough whether that's bug or according spec.

anyway, if new element image, add transitions/css class via load event.

however, unable find event fires when sans-url elements added dom. chose fall on timeout, should work well.

your code this:

var element = $("<div id='blackoutdiv'></div>").css(cssobj).appendto( 'body' ); settimeout(function() {   $('#blackoutdiv').addclass('blackout'); }, 100);