Isotope translate3dの値が増加しました

Question

私はアイソトープを使用してプロジェクトをフィルタリングしていますが、インラインスタイルのtranslate3d値が増加しているため、プロジェクトが整理されていません。たとえば、最初のプロジェクトは0px、0px、0px私の場合、それは私がこの

のようなよく組織4つのプロジェクトが、私はJSコードを含めるI 3つの1行でのプロジェクトではなく、それが必要として組織化を参照してくださいJavaScriptコードを含めなければ、0PX、40ピクセルで0PX

を開始しますbe

Feniciが言ったようにプロジェクトがフッタ

Javascriptを

jQuery('document').ready(function() { 
    var portfolio = jQuery('#portfolio'); 
    var items  = jQuery('.items', portfolio); 
    var filters  = jQuery('.filters li a', portfolio); 

    items.imagesLoaded(function() { 
     items.isotope({ 
      itemSelector  : '.item', 
      layoutMode   : 'fitRows', 
      transitionDuration : '0.7s' 
     }); 
    }); 
}); 

CSS

.isotope-item { 
    z-index: 2; 
} 

.isotope-hidden.isotope-item { 
    pointer-events: none; 
    z-index: 1; 
} 
.isotope-item { 
    /*I removed "transform 0.5s" and "!important"*/ 
    transition: opacity 0.5s, background-color 0.25s linear, border-color 0.25s linear; 
} 
.isotope, 
.isotope .isotope-item { 
    /* change duration value to whatever you like */ 
    -webkit-transition-duration: 0.7s; 
    -moz-transition-duration: 0.7s; 
     -ms-transition-duration: 0.7s; 
     -o-transition-duration: 0.7s; 
      transition-duration: 0.7s; 
} 

.isotope { 
    -webkit-transition-property: height, width; 
    -moz-transition-property: height, width; 
     -ms-transition-property: height, width; 
     -o-transition-property: height, width; 
      transition-property: height, width; 
} 

.isotope .isotope-item { 
    -webkit-transition-property: -webkit-transform, opacity; 
    -moz-transition-property: -moz-transform, opacity; 
     -ms-transition-property:  -ms-transform, opacity; 
     -o-transition-property:  -o-transform, opacity; 
      transition-property:   transform, opacity; 
} 

/**** disabling Isotope CSS3 transitions ****/ 

.isotope.no-transition, 
.isotope.no-transition .isotope-item, 
.isotope .isotope-item.no-transition { 
    -webkit-transition-duration: 0s; 
    -moz-transition-duration: 0s; 
     -ms-transition-duration: 0s; 
     -o-transition-duration: 0s; 
      transition-duration: 0s; 
} 

Answer 1

上記ページの下部に位置するブロックの問題を理解するためにmy websiteをご覧ください彼のコメント、これに対する解決策は、<ul>に内部埋め込みを落とすことです：

ul.items { 
    padding: 0; 
} 

現在、原因のJavaScript（およびその後同位体）で異なるボックスモデルの使用に同位元素測位の計算中に使用されないitemSelectorの親にpadding-right:40px;があります。

Answer 2

アイソトープv1.5.25（2013年）の非常に古いバージョンを使用していますが、現在のバージョン（transitionDuration:は旧バージョンの一部ではありません）からjsコードで開始しています。最新のバージョンは.isotope cssを使用しないv3.0.4です。 isotope.jsを現在のバージョンにアップグレードし、上記のCSSを削除してください。