jQuery的同位素 - 防止同位素從做初期轉移

Question

我使用同位素與CSS如

.isotope-item { 
    -webkit-transition-duration: 0.8s; 
    -moz-transition-duration: 0.8s; 
     -ms-transition-duration: 0.8s; 
     -o-transition-duration: 0.8s; 
      transition-duration: 0.8s; 
} 

這讓我的佈局做了0.8過渡連成初始狀態。我希望它不是初始化過渡，但保持0.8s過渡的調整大小或添加項目

Answer 1

爲什麼你不說唱媒體屏幕中的過渡，以便例如如果您的同位素容器是980px;

@media screen and (min-width: 0px) and (max-width: 981px) { 
    -webkit-transition-duration: 0.8s; 
    -moz-transition-duration: 0.8s; 
    -ms-transition-duration: 0.8s; 
    -o-transition-duration: 0.8s; 
    transition-duration: 0.8s; 
} 

過渡將僅最初由選項containerClass最初設置爲空字符串，然後之後設置在容器上的.isotope類具有施加到容器中的.isotope類0-980px的

Answer 2

避免發生之間最初的佈局已經發生。

var containerClassSet = false, 
    $container = $('#container'); 
$container.isotope({ 
    containerClass: '', 
    onLayout:  function ($elems, instance) { 
     if (!containerClassSet) { 
      containerClassSet = true; 
      setTimeout(function() { 
       $container.addClass('isotope'); 
      }, 0); 
     } 
    } 
}); 

確保你的類與.isotope前綴：

.isotope .isotope-item { 
    ... 
}