Эффекты изотопной анимации не работают

Question

Я попытался использовать некоторый переход CSS3 на изотопных элементах, но не работает должным образом, элементы действуют странным образом. То, что я пытаюсь достичь, - это то, что элементы имеют эффект затухания, тот же, что и здесь, http://www.keatonpricedesign.com/#works. Заранее спасибо

Он то, что у меня есть http://codepen.io/GranitS/pen/VYmNdJ

<div id="filters" class="button-group"> 
<button class="button is-checked" data-filter="" id="all-filter">All</button> 
<button class="button" data-filter=".one">One</button> 
<button class="button" data-filter=".two">Two</button> 
<button class="button" data-filter=".three">Three</button> 
</div> 
<div class="isotope"> 
<div class="item one"> 1 </div> 
<div class="item two"> 2 </div> 
<div class="item three"> 3 </div> 
<div class="item four"> 4 </div> 
</div> 

CSS:

.item{ 
width:50px; height:50px; 
background-color:red; 
float:left; 
padding:20px; 
margin:20px; 
} 

.isotope, 
.isotope .item { 
    /* change duration value to whatever you like */ 
    -webkit-transition-duration: 0.8s; 
    -moz-transition-duration: 0.8s; 
    -ms-transition-duration: 0.8s; 
    -o-transition-duration: 0.8s; 
     transition-duration: 0.8s; 
} 

.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 .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; 
} 

Answer 1

Вы не должны быть используя CSS, чтобы попытаться контролировать изотопные эффекты, поскольку они могут конфликтовать с переходами Изотопа, вызывая t он странный эффект вы видите. Вы должны удалить свои .isotope стили и вместо этого использовать опции visibleStyle, hiddenStyle и transitionDuration при инициализации изотопа.

var iso = new Isotope('.isotope', { 
    itemSelector: '.item', 
    layoutMode: 'fitRows', 
    hiddenStyle: { 
     opacity: 0 
     /* , transform: 'scale(0.001)' -- disabled scaling */ 
    }, 
    visibleStyle: { 
     opacity: 1 
     /* , transform: 'scale(1)' -- disabled scaling */ 
    }, 
    transitionDuration: '0.8s' 
}); 

Подробнее об этом можно узнать на Isotope options page.

Here is a codepen с этими изменениями.

EDIT:

Изотоп не поддерживает выключая только переходы позиции с любым из встроенных опций (хотя вы можете отключить все переходы, установив transitionDuration 0 или с использованием недокументированных isLayoutInstant: true), но вы можете перезаписать функцию _positionItem, чтобы принудительно выполнить требуемое поведение. Просто поместите следующий код в начале вашего JavaScript:

var positionFunc = Isotope.prototype._positionItem; 
Isotope.prototype._positionItem = function(item, x, y, isInstant) { 
    // ignore actual isInstant value, pass in `true` to the original function; 
    positionFunc(item, x, y, true); 
}; 

Here is an updated codepen с этим применяется.

Answer 2

можно не только удалить эту часть CSS:

.isotope, 
.isotope .item { 
    /* change duration value to whatever you like */ 
    -webkit-transition-duration: 0.8s; 
-moz-transition-duration: 0.8s; 
    -ms-transition-duration: 0.8s; 
    -o-transition-duration: 0.8s; 
     transition-duration: 0.8s; 
} 

Answer 3

Я не говорю, что это лучший способ, но если вы решите переопределить свойство transition, это остановит другие анимации. Вы можете играть с этой идеей, и он может получить вас на вашем пути:

.isotope .item { 
    transition-property: opacity !important; 
} 

Если вы хотите, чтобы играть с ним, это ваша ручка с парой изменений: http://codepen.io/anon/pen/myOYeE

Вы можете добавить в части @ markegli в тоже, чтобы помочь с выцветанием:

hiddenStyle: { opacity: 0 }, 
visibleStyle: { opacity: 1 }