AngularJS를 사용하여 공유 요소 전환 구현

Question

AngularJS를 사용하여 PhoneGap/Cordova 응용 프로그램을 개발 중입니다. 내 타겟 플랫폼이 안드로이드이기 때문에 나는 활동 전환을위한 다른 접근법을 들여다 보았다. 다른 말로; 네이티브 및 직관적 인 사용자 경험을 제공하면서 양식 A와 양식 B 간의 전환을 애니메이션 화하는 방법.

내 응용 프로그램은 재료 디자인 지침을 구현할 것이고 "shared element transition"이라는 전환 애니메이션을 보았을 때 대부분의 응용 프로그램 흐름에서 완벽하게 작동한다고 생각했습니다.

나는 실제로 정말이 방법을 추천하고 일반적인 가능한 한 유연하고 응용 프로그램을 통해 사용하기 쉬운 같다 각도 1.5을 기반으로 구현을 달성하는 방법에 대해 궁금 해서요.

저는 AngularJS를 처음 접했으므로 shared element transition의 라인을 따라 무언가를 구현할 수있는 방법을 찾기 위해 커뮤니티에 다시 확인하거나 이미 구현 된 것을 가리킬 수 있습니다.

궁금한 분들은 Angular 1.5와 MaterializeCSS를 사용하여 내 앱을 강화할 수 있습니다. 고마워요!

Answer 1

이 튜토리얼 (사용 준비가 완료된 구성 요소)을 확인하면 다양한보기간에 영웅 요소를 애니메이션 처리하고 올바른 경로를 유지합니다. 요약하면

http://blog.scottlogic.com/2014/12/19/angular-hero-transitions.html

는 주인공 요소는 두 개의 뷰가 전환되는 사이에 존재한다. 전환 할 때, 영웅 요소는 위치 애니메이션이 끝날 때까지 대상보기에 일시적으로 숨겨집니다. 대상보기가 직접로드되는 경우 (새로 고침, 책갈피) 애니메이션이 수행되지 않고 영웅 요소가 나타납니다.