Вставки изотопной анимации сверху слева контейнера - PullRequest
Новая
       8

Вставки изотопной анимации сверху слева контейнера

1 голос
/ 11 июля 2011

Для моего контейнера с изотопами всякий раз, когда я вставляю новый элемент в контейнер ... он первоначально появляется в верхнем левом углу контейнера (то есть в положении первого элемента), а затем анимируется, перемещаясь вниз на место куда он должен идти в зависимости от рода.

Вот пример того, что я хотел бы случиться, хотя: http://jsfiddle.net/aaairc/H4ZMV/5/. Как вы видите в этом примере, новый элемент увеличивается, начиная с позиции, которую он собирается занять в контейнере.

Я еще не смог воспроизвести проблему, которую я вижу локально в jsfiddle, но я подумал, что кто-то может получить первоначальное предложение или указать мне, что в моем примере jsfiddle фактически позволяет вставке иметь хороший масштаб в функциональности. Это просто по умолчанию? Что-то связанное с CSS?

Кроме того, не уверен, что это уместно, но элементы контейнера моего экземпляра изотопа или всех jpgs.

Ответы [ 2 ]

2 голосов
/ 13 июля 2011

Это было связано с тем, как вы определяете CSS.Когда я изменил свой CSS на этот, он работал так, как я ожидал. 

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */

/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
          transition: none;
}
1 голос
/ 21 июля 2011

Эта функция была встроена в Isotope v1.4. См. Metafizzy blog: Isotope v1.4 - улучшенная анимация вставки

...