JavaScript阻止CSS？

Question

我有一個燈箱照片庫我正在建設。當第一個圖像加載css過渡作品。當加載後的每個圖像都沒有。任何想法爲什麼？第一次加載後的照片卻沒有過渡。

Image.prototype.load = function(url){ 
 
      var thisImg = this; 
 
      var xmlHTTP = new XMLHttpRequest(); 
 
      xmlHTTP.open('GET', url,true); 
 
      xmlHTTP.responseType = 'arraybuffer'; 
 
      xmlHTTP.onload = function(e) { 
 
       var blob = new Blob([this.response]); 
 
       thisImg.src = window.URL.createObjectURL(blob); 
 
      }; 
 
      xmlHTTP.onprogress = function(e) { 
 
       thisImg.completedPercentage = parseInt((e.loaded/e.total) * 100); 
 
      }; 
 
      xmlHTTP.onloadstart = function() { 
 
       thisImg.completedPercentage = 0; 
 
      }; 
 
      xmlHTTP.onloadend = function() { 
 
       thisImg.completedPercentage = 0; 
 
       gallery.appendChild(currentImage); 
 
       gallery.className = "gallery toggle"; 
 
      }; 
 
      xmlHTTP.send(); 
 
     };

.gallery { 
 
    display: absolute; 
 
    position: fixed; 
 
    margin: auto; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    -moz-transition: opacity 0.5s, visibility 0.5s ease-in-out; 
 
    -webkit-transition: opacity 0.5s, visibility 0.5s ease-in-out; 
 
    -ms-transition: opacity 0.5s, visibility 0.5s ease-in-out; 
 
    transition: opacity 0.5s, visibility 0.5s ease-in-out; 
 
    background: rgba(0, 0, 0, 0.0); 
 
    width: 96%; 
 
    height: 96%; 
 
    margin-top: 2%; 
 
    margin-left: 2%; 
 
    overflow: hidden; 
 
    z-index: 1001; 
 
} 
 

 
.gallery.toggle { 
 
    visibility: visible; 
 
    opacity: 1; 
 
}

Answer 1

你的CSS是在頁面加載執行。當您動態添加或刪除內容時，CSS不會再次加載。加載圖像後，您可能必須使用JS創建轉場。

也許這會有所幫助：

https://timtaubert.de/blog/2012/09/css-transitions-for-dynamically-created-dom-elements/

Answer 2

您與類gallery toggle，這意味着過渡，就永遠不會增加的圖像;它將以最終狀態加載。您需要使用gallery加載圖像，允許DOM渲染，然後添加toggle類。你可以這樣做：

xmlHTTP.onloadend = function() { 
    thisImg.completedPercentage = 0; 
    gallery.appendChild(currentImage); 
    gallery.className = "gallery"; 

    setTimeout(function() { 
     gallery.className = 'gallery toggle'; 
    }, 20); 
};