CSS過渡同位素過濾 - 僅限褪色

我試圖取消使用同位素過濾出的項目的高度和寬度的CSS轉換。所以，只要有物品淡出或進入，並且移動 - 沒有縮放。CSS過渡同位素過濾 - 僅限褪色

我試過各種CSS修改標準的CSS轉換：http://isotope.metafizzy.co/docs/animating.html#css_transitions，但沒有成功。

這可能沒有修改插件？

這裏是什麼，我目前所面對的一個演示：http://codepen.io/2kp/pen/nAGkp

2013-08-21 Jim Hyland

你試過css不透明度了嗎？ –

默認的CSS轉換選項包括CSS工具不透明度和比例尺。我只是試圖去除縮放。 –

$('#container').isotope({ 
     hiddenStyle: { 
     opacity: 0 
     }, 
     visibleStyle: { 
     opacity: 1 
     } 
})

來源

2014-08-20 22:50:22 stoolio

只是試圖做同樣的事情，動畫只是不透明度+高度，沒有寬度，並認爲我的方式，我發現適合自己的解決方案 - 至少我希望如此！

只需添加到您的JS：

$('#container').isotope({ 
    // options... 
    transformsEnabled: false 
});

，並改變CSS來：

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

來源

2013-09-25 10:16:04 crtslprpt

我無法得到這個工作。你仍然有一些縮放奇怪。 –

我最終採取修改插件本身的路線（刪除transform:"scale(0.001)"和transform:"scale(1)" ），因爲覆蓋hiddenStyle和visibleStyle對象不起作用（如同位素文檔http://isotope.metafizzy.co/options.html#visiblestyle所建議的）。

希望有幫助！看起來像插件中的錯誤。

來源

2014-09-26 20:17:00 sarahholden

你是否在使用hiddenStyle和visibleStyle的同位素v2？這個對我有用。 – Macsupport

也許我沒有在文檔中看到這個，或者它是一個固定的bug，但hiddenStyle和visibleStyle編輯現在對我來說工作正常。 –

CSS過渡同位素過濾 - 僅限褪色

回答

相關問題