Забавяне на изотопна анимация на jQuery

Любопитно дали някой там е успял да промени CSS3 преходите, използвани с jquery Isotope, за да добави забавяне към начина, по който елементите се разбъркват, използвайки нещо като "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;
}

Всеки принос би бил невероятен!


jquery css jquery-isotope
person nickff    schedule 29.02.2012    source източник

Отговори (1)


arrow_upward
7
arrow_downward

Вижте 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;
}
person desandro    schedule 29.02.2012