イメージをロードした後でトランジションイベントを開始する

Question

トランジションに問題があります。イメージを含むdivは「right：200px;」から移動する必要があります。ここ

div.contenedor { 
     width: 300px; 
     height: 257px; 
     position: fixed; 
     right: 200px; 
     bottom: 0px; 
     z-index: 100; 
     -webkit-transition: right 2s; 
     -moz-transition: right 2s; 
     transition: right 2s; 
    } 

とJSコード：

 function transi() { 
      var id = "L" + Math.floor(Math.random() * 10000); 
      function open() { 
       var eOpen = document.getElementById(id + "_container"); 
        eOpen.style.right = "400px"; 
      }; 

      var dContenedor = document.createElement("div"); 
      dContenedor.id = id + "_container"; 
      dContenedor.className = "contenedor"; 

      var ima = document.createElement("img"); 
      ima.src = "XXXX.jpg"; 
      ima.width = "300"; 
      ima.height = "250"; 

      dContenedor.appendChild(ima); 

      document.onreadystatechange = function(){ 
       var rsw = this.readyState; 
       console.log(rsw); 
       if (rsw) if (rsw != 'complete') if (rsw != 'loaded') {return;} 
       document.body.appendChild(dContenedor); 
       console.log(ima.complete); 
       if (ima.complete) { 
        open(); 
       }; 
      } 
     }; 
     transi(); 

については2Sでの推移と画像が文書にロードされたときに開始する必要が移行する「400ピクセル」に、ここでCSSのコードがあります何らかの理由で移行が行われておらず、divが直接「400px」に向かいます。誰かが考えていることがあれば、私はそれを感謝します。

Answer 1

多分、loadイベントでコール機能がありますか？

UPD を追加しました作業例

function transi() { 
 
    var id = "L" + Math.floor(Math.random() * 10000); 
 
    var dContenedor = document.createElement("div"); 
 
    dContenedor.id = id + "_container"; 
 
    dContenedor.className = "contenedor"; 
 

 
    function open() { 
 
    // we already have ref to needed element 
 
    dContenedor.style.right = "400px"; 
 
    }; 
 

 
    var ima = document.createElement("img"); 
 
    ima.width = "300"; 
 
    ima.height = "250"; 
 

 
    dContenedor.appendChild(ima); 
 
    document.body.appendChild(dContenedor); 
 
    // when image is loaded fire event 
 
    ima.onload = function() { 
 
    open(); 
 
    } 
 
    ima.src = "https://v1.std3.ru/32/9b/1455811008-329b55c554efcec3988dc8ab44eb972f.jpeg"; 
 
}; 
 
transi();

div.contenedor { 
 
    width: 300px; 
 
    height: 257px; 
 
    position: fixed; 
 
    right: 200px; 
 
    bottom: 0px; 
 
    z-index: 100; 
 
    -webkit-transition: right 2s; 
 
    -moz-transition: right 2s; 
 
    transition: right 2s; 
 
    background: #333; 
 
    }