지난 5 시간 동안이 애니메이션이 운없이 작동하도록 노력했습니다. 사용자가 버튼을 클릭 할 때마다 멋진 애니메이션을 만들고 싶었습니다. 아이디어는 http://lab.hakim.se/scroll-effects/mobile 처럼 플립 애니메이션에 ul 요소 목록을 표시하는 것 입니다. html 이 작동합니다 (톱니 바퀴 아이콘에서 플립을 선택하고 크롬 장치 모드를 모바일 장치로 변경 한 경우).
Angular 및 Ionic과 함께 ngAnimate를 사용하여 http://play.ionic.io/app/4ae65754fc64 (장바구니에 추가 버튼을 클릭 해보 십시오)에서 코드 조각을 만들었습니다 . 각 li 항목이 표시 될 때마다 뒤집어지고 계단식으로 표시되는 것처럼 표시하고 싶습니다. 어떤 이유로 분류 된 모든 애니메이션이 무시됩니다.
좋아, 나는 당신이 이루고 싶은 것을 성취했다고 생각합니다. 아래에 두 개의 데모를 제공했습니다.
그러나 먼저 AngularJS> = 1.2에서는 ng-animate 지시문이 더 이상 지원되지 않습니다. 그리고 ng-show 기반 애니메이션의 경우 ngRepeat 문서에 설명 된 CSS 클래스가 아닌 ng-hide-add, ng-hide-remove CSS 클래스를 사용해야합니다.
ionic 데모 (아래 첫 번째 링크)는 기본적으로 코드의 모형 일 뿐이며 어떤 방법으로도 완벽하지 않습니다.
코드 펜 데모는 좀 더 수정 된 예제와 일반적인 예제입니다. 내가 사용 <ion-list>하고 <ion-item>대신 <ul>과 <li>.
이것이 최종 솔루션을 구현할 때 올바른 방향으로 나아가기를 바랍니다.
Ionic 데모 : http://play.ionic.io/app/3c0e90238fe8
Codepen 데모 (보다 일반적인) : http://codepen.io/thepio/pen/KMPeZo
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다