Задержка анимации изотопов jQuery

Question

Любопытно, если кто-то там смог изменить переходы CSS3, используемые с jquery Isotope, чтобы добавить задержку к тому, как элементы перемещаются с использованием чего-то вроде «delay-delay: 0s, 1s;».

Я бы хотел, чтобы они перемешались сначала влево, затем вниз, для более математического типа ощущения при фильтрации (вместо стандартного «диагонального перетасовки»). Кажется, что любые изменения, внесенные в переходы css3 по умолчанию, не работают.

Вот мой текущий CSS:

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

.isotope { 
    -webkit-transition-property: height, width; 
    -moz-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; 
     -o-transition-property:   top, left, opacity; 
      transition-property:   transform, opacity; 
} 

Любой вход будет удивительно!

Answer 1

См http://jsfiddle.net/desandro/QwWv7/

Вы можете установить задержку для каждого свойства CSS, которые вы упразднен. Но поскольку преобразования состоят из преобразования X в качестве одного преобразования, вам придется вернуться к использованию абсолютного/относительного позиционирования, чтобы вы могли установить отдельную задержку как для left, так и для top. Делайте это с настройками transformsEnabled: false в настройках

$container.isotope({ 
    itemSelector: '.item', 
    transformsEnabled: false 
}); 

Затем вам нужно изменить transition-property CSS для верхней и оставил

.isotope .isotope-item { 
    /* multiple -vendor declarations omited for brevity */ 
    transition-property: left, top, opacity; 
} 

Наконец, добавьте transition-delay значения для каждого из этих свойств. Мы хотим только отложить top.

.isotope .isotope-item { 
    transition-delay: 0s, 0.8s, 0s; 
}