Блокировка 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); 
};