여기에 목록의 항목 삽입을 활성화하는 a simple Plunkr이 있습니다. 이것은 -webkit-transform을 사용하여 scale (0)에서 scale (1)까지 삽입의 크기를 조정합니다. ng-animate = " 'insert'"를 ng-animate = " 'fader'"로 전환하면 항목을 삽입하는 데 자바 스크립트 애니메이션이 사용됩니다.CSS 키 프레임 애니메이션을 Angular의 ng-animate 지시문에서 사용할 수 있습니까?
하지만 여기서는 대신 CSS 키 프레임 애니메이션을 사용할 수 있기를 바랍니다. 목록의 마지막 항목은 하드 코딩되어 있으며 "float-enter-start"클래스를 사용합니다. ng-animate가이 클래스를 올바르게 적용하는 것처럼 보이지 않습니다. ng-animate = " ''float '을 설정하는 것이 효과가 있지만 그렇지 않습니다. 내가 뭘 놓치고 있니?
CSS 애니메이션 코드가 작동하지 않는 이유는 CSS3 애니메이션을 사용하고 전환이 아니기 때문입니다. 현재 AngularJS ngAnimate는 CSS 애니메이션 속성 (전환 만) 감지를 지원하지 않습니다. 이번 주에이 문제를 해결해 달라는 요청이 있으며, 이번 주 월요일과 금요일 사이에 계획을 세울 계획입니다.
한편이 기능을 계속 지원하려면 함수 본문 내부에 아무것도 포함하지 않은 JavaScript 애니메이션을 사용하여이 기능을 사용할 수 있습니다. CSS 애니메이션의 XXXX 밀리 초가 지난 후에 done() 메서드를 호출하면됩니다. 그런 다음 CSS 코드에서 (ngAnimate가 여전히 CSS 클래스를 요소에 추가하기 때문에) 동일한 CSS 애니메이션 코드를 사용할 수 있지만 설정 시간 초과 안에 함수 본문 내에서 전체 기간을 사용하면됩니다.
여기 코드가 있습니다. 실제 애니메이션을 수행하기 전에 CSS 코드를 포함 시키십시오. https://gist.github.com/matsko/5426873
CSS 애니메이션이 ngAnimate에서 지원됩니다. github의 마스터 브랜치로 건너 뛰고 코드를 패키지화하여 angular.js의 업데이트 된 버전을 얻으십시오. – matsko
이 버전은 키 프레임을 지원합니다 : [NgAnimate 1.1.5 Documentation] (http://code.angularjs.org/1.1.5/docs/api/ng.directive : ngAnimate). [NgAnimate Samples] (http://www.nganimate.org/angularjs/ng-repeat/3d-rotate) –