Изотопная фильтрация с переходами CSS - исчезает только

Question

Я пытаюсь деактивировать css-переходы высоты и ширины элементов при отфильтровании с использованием изотопа. Таким образом, только что элементы исчезают или вступают, и перемещаются - нет масштабирования.

Я пробовал все виды модификации css для стандартных css-переходов: http://isotope.metafizzy.co/docs/animating.html#css_transitions, но без успеха.

Возможно ли это без изменений плагина?

Вот демо о том, что у меня есть на данный момент: http://codepen.io/2kp/pen/nAGkp

Answer 1

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

Answer 2

Просто пытаюсь сделать что-то подобное, анимировать только непрозрачность + рост, а не ширину и думаю, что на моем пути я нашел решение, которое работает для вас - по крайней мере, я так надеюсь!

Просто добавьте это к вашим 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; 
} 

Answer 3

я в конечном итоге принимает маршрут модификации самого плагина (путем удаления transform:"scale(0.001)" и transform:"scale(1)"), поскольку переопределение объектов hiddenStyle и visibleStyle не работало (как указано в документации Isotope http://isotope.metafizzy.co/options.html#visiblestyle).

Надеюсь, что это поможет! Похоже на ошибку в плагине.