Jerky가 Chrome에서 ngAnimate로 CSS 전환을 중단했습니다.

Question

나는 ngAnimate로드 됨으로 나타났습니다. 다른 전환으로 중단되면 Chrome에서 CSS 전환이 "불쾌"합니다. 즉, 현재 값에서 시작하는 것이 아니라 대상 상태로 앞으로 이동하는 것처럼 보입니다. 정확한 전환은 ngAnimate가 없으면 훨씬 부드럽고, ngAnimate가 있거나없는 Firefox에서는 더 부드럽습니다. CSS의 전환에 의해 애니메이션

<bigger-on-click-class class="{{showBigger ? 'bigger' : ''}}" ng-click="showBigger = !showBigger"></bigger-on-click-class> 

:

bigger-on-click-class { 
    display: block; 
    height: 200px; 
    width: 200px; 
    background: red; 
    -webkit-transition: height 5s; 
    transition: height 5s; 
} 

bigger-on-click-class.bigger { 
    height: 400px; 
} 

가에 따라 빠르게 연속해서 여러 번의 클릭에 다르게 작동

예를 들어, 추가하는 간단한 요소/클릭에 클래스를 제거 ngAnimate이로드되었는지 여부 :

http://plnkr.co/edit/Fhwbd3WRiz5wHRIm10y3?p=preview 0 없음(ngAnimate)

이전 예제의 빨간색 상자에서 여러 번 빨리 클릭하면 의미가 표시되거나 아래를 클릭하여 스크린 캐스트를 볼 수 있습니다.

다른 ngAnimate를로드하지 않고,을 피할 수있는 방법이 너무 중단 애니메이션은 현재 표시된 값/위치에서 시작 있는가?

편집 : 초기 링크가 잘못되었습니다. 또한, 저속한 동작은 Chrome에서는 관찰되지만 Firefox에서는 관찰되지 않습니다. 편집 : 나는 그것을 처리 년대 ngAnimate 이러한 스타일 속성을 설정 가정

transition: none; 
-webkit-transition: none; 

: 그것은 내가 애니메이션 스타일이 설정되고 발생했을 때 발견

Answer 1

크롬/파이어 폭스의 차이점이 명확하게하는 질문을 재 프레임 잠시 동안 다른 브라우저는 영향을받지 않지만 크롬이 볼 때 전환이 적용되지 않은 것처럼 즉시 애니메이션을 완료합니다.

그래서 당신은 단지 이러한 속성은 다음과 같이 당신의 속성을 설정하여 무시받을 수 있도록 할 필요가 당신의 문제를 해결하는 것이 중요합니다!을 피할 수있는 plnkr here

Answer 2

한 가지 방법으로 작업을 볼 수 있습니다

transition: height 5s !important; 
-webkit-transition: height 5s !important; 

jerkiness : Angular 1.3으로 업그레이드. ngAnimate의 Angular 1.3 beta 7 ngAnimate docs

이전 버전 내 Plunker using Angular 1.3 beta 7에서 볼 수있는 자연 CSS 전환 휴식과 제대로 인해 $ 일시적으로 0 없음

그리고 차를 이용하지 전환을 차단 애니메이션을 렌더링하지 않는 원인이 될 수 인용

Answer 3

ng-hide css 클래스가 display : none으로 설정되어 애니메이션이 크롬에서 작동하지 않았지만 사파리에서 작동하기 때문에 문제가 발생했습니다.