AngularJS에서 ng-repeat의 매끄러운 필터링

테이블이 있고 tr이 ng-repeat에 의해 생성됩니다. 필터 (이 경우 페이지 변경)를 필터링하면 모든 행이 새로운 행으로 교체됩니다. 그러나 초 동안, 우리는 오래된 필터링 된 행 (예를 들어 3 페이지)과 새로운 필터링 된 행 (4 페이지)을 볼 수 있습니다. 이것은 10 분의 1 초 동안 내 디자인을 망치는 것처럼 꽤 추합니다.AngularJS에서 ng-repeat의 매끄러운 필터링

원활하게 전환 할 수있는 방법이 있습니까? 나는 (AngularJS 1.2.0RC1) 전에 ng-repeat 애니메이션을 가지고 있었지만, 같은 일이 (더 오래 동안) 일어 났고, 나는 애니메이션을 비활성화함으로써 해결 될 것이라고 생각했다. 불행히도, 그것을 고치지 못했습니다.

아이디어가 있으십니까?

[편집]

이것은 그것을

.animate.ng-enter { 
    -webkit-animation: enter_sequence 0.2s linear; /* Safari/Chrome */ 
    -moz-animation: enter_sequence 0.2s linear; /* Firefox */ 
    -o-animation: enter_sequence 0.2s linear; /* Opera */ 
    animation: enter_sequence 0.2s linear; /* IE10+ and Future Browsers */ 
} 
@-webkit-keyframes enter_sequence { 
    from { opacity:0;} 
    to { opacity:1;} 
} 
@-moz-keyframes enter_sequence { 
    from { opacity:0;} 
    to { opacity:1;} 
} 
@-o-keyframes enter_sequence { 
    from { opacity:0;} 
    to { opacity:1;} 
} 
@keyframes enter_sequence { 
    from { opacity:0; } 
    to { opacity:1; } 
} 

.animate.ng-leave { 
    -webkit-animation: leave_sequence 0.2s linear; /* Safari/Chrome */ 
    -moz-animation: leave_sequence 0.2s linear; /* Firefox */ 
    -o-animation: leave_sequence 0.2s linear; /* Opera */ 
    animation: leave_sequence 0.2s linear; /* IE10+ and Future Browsers */ 
} 
@-webkit-keyframes leave_sequence { 
    from { opacity:1; } 
    to { opacity:0; } 
} 
@-moz-keyframes leave_sequence { 
    from { opacity:1; } 
    to { opacity:0; } 
} 
@-o-keyframes leave_sequence { 
    from { opacity:1; } 
    to { opacity:0;} 
} 
@keyframes leave_sequence { 
    from { opacity:1; } 
    to { opacity:0; } 
}

출처

2013-08-23 Samuel Bolduc

애니메이션에'enter'와'leave' CSS 스타일을 사용 해본 적이 있습니까? jsfiddle이나 코드를 볼 수 있습니까? 내 AngularJS 프로젝트에서 나는 당신이 묘사 한 내용과 유사하다고 생각하는 것을 발견했지만'$ routeProvider'를 사용하기 시작했을 때 정리했습니다. – jnthnjns

일부 CSS를 추가했는데 거기에 적용 할 수있는 몇 가지 조정을 볼 수 있습니까? 충분하지 않다면 jsFiddle을 만들려고 시도 할 수 있지만 현재 프로젝트의 복잡성을 감안할 때 문제를 보여주기 위해 거기에 이식하는 것이 꽤 어려울 것입니다 ... –

당신이 CSS의 전환을 지연 봤어 비활성화하기 전에 내가 애니메이션에 사용되는 CSS,? 나를위한 작품

출처

2013-09-04 10:24:58 Michael

나는 그것을 시도했지만 정말로 많이하지 못했습니다. –

애니메이션이 지속되는 시간을 두 번 지연시킵니다. 일반적으로 사용하는 응용 프로그램에서 0.75 초의 애니메이션 시간을 사용합니다. 전환 지연 : 1.5 초; -webkit-transition-delay : 1.5s; – Michael

AngularJS에서 ng-repeat의 매끄러운 필터링

답변

관련 문제