jQuery Isotope 애니메이션 지연

Question

jquery Isotope와 함께 사용 된 CSS3 전환을 변경하면 "transition-delay : 0s, 1s;"와 같은 항목을 사용하여 항목을 셔플하는 방식을 지연시킬 수 있습니다.

필자는 먼저 왼쪽으로 셔플 한 다음 아래쪽으로 이동하여 필터링 할 때 (기본 "대각선 셔플"대신) 더 많은 수학적 느낌을 주었으면합니다. 기본 css3 전환에 대한 변경 사항은 작동하지 않는 것으로 보입니다.

/**** 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; 
} 

모든 입력이 놀라운 것 :

여기에 내 현재 CSS입니다!

Answer 1

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

당신은 당신이 전환하고 각 CSS 속성에 대한 지연 시간을 설정할 수 있습니다 참조하십시오. 그러나 변환은 하나의 변환에서 X & Y 변환으로 이루어 지므로 절대/상대 위치 지정을 사용하여 다시 전환해야하므로 left 및 top에 대해 별도의 지연을 설정할 수 있습니다. 이러한 각 속성에 대한 transition-delay 값을 추가, 상단의 transition-property CSS를 변경해야하고 마지막으로

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

을 떠난거야 그런 다음 옵션

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

의 설정 transformsEnabled: false와 너무 마십시오. top 만 지연시키고 싶습니다.

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