Задержка изотопной анимации в jQuery - PullRequest
Новая
       5

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

1 голос
/ 01 марта 2012

Любопытно, что кто-то мог изменить CSS3-переходы, используемые с изотопом jquery, чтобы добавить задержку к тому, как элементы перемешиваются, используя что-то вроде «transition-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;
}

Любой вклад был бы потрясающим!

1 Ответ

7 голосов
/ 01 марта 2012

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

Вы можете установить задержку для каждого свойства CSS, которое вы переходите.Но поскольку преобразования состоят из преобразования X & Y в одном преобразовании, вам придется использовать абсолютное / относительное позиционирование, чтобы можно было установить отдельную задержку для 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;
}
...