jQuery Isótopo de Animação Atraso

Question

Curioso para saber se alguém aí tem sido capaz de alterar as transições CSS3 usado com jquery Isótopo para adicionar um atraso para a forma como os itens aleatória utilizando algo como "transição de atraso:0s, 1s;".

Eu gostaria de shuffle primeiro para a esquerda, depois para baixo, para um mais matemático tipo de sensação, quando a filtragem (em vez do padrão "diagonal shuffle").Parece que todas as alterações feitas para o padrão de transições css3 simplesmente não funcionam.

Aqui está o meu atual 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;
}

Qualquer entrada seria incrível!

Answer 1

Ver http://jsfiddle.net/desandro/QwWv7/

Você pode definir um atraso para cada propriedade CSS que você está em transição.Mas porque transforma os compostos X e Y de tradução em uma transformação, você vai ter que cair para trás para utilizar relativo/absoluto de posicionamento, de modo que você pode definir um separado atraso para tanto left e top.Fazer isso com configurações transformsEnabled: false nas opções

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

Em seguida, você precisará alterar o transition-property CSS para cima e esquerda

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

Finalmente, adicione transition-delay valores para cada uma dessas propriedades.Só queremos atraso top.

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