각도. 플렉스 요소 애니메이션하기

Question

안녕하세요.

검색이 변신을 클릭 할 때 : 마크 업에서

두 flex 요소가 : 헤더 (flex: 1) 나는 같은 보이는 작은 구성 요소가 검색을 위해. 검색을 클릭하면 첫 번째 것을 숨기고 두 번째를 펼칩니다. 이제 전환을 애니메이션화하려고합니다.

헤더 요소에 애니메이션을 적용하기 시작했습니다. 우선은 width 애니메이션을 시도 :

는

transition(':enter', [ 
    style({width: 0, 'max-width': 0}), 
    animate(500, style({width: '*', 'max-width': '*'})), 
]), 
transition(':leave', [ 
    style({width: '*', 'max-width': '*'}), 
    animate(500, style({width: 0, 'max-width': 0})), 
]), 

이 입력에 거의 인스턴트의와 Header 단어 축소의 왼쪽 대신에 슬라이딩.

가 그럼 난 flex-grow 애니메이션 시도 (헤더 overflow: hidden을 설정하면 완전히 애니메이션을 나누기) :

transition(':enter', [ 
    style({'flex-grow': '0.001'}), 
    animate(500, style({'flex-grow': '1'})), 
]), 
transition(':leave', [ 
    style({'flex-grow': '1'}), 
    animate(500, style({'flex-grow': '0.001'})), 
]), 

더 나은 입력에 애니메이션과 휴가에 거의 애니메이션. 두 함께 결합 :

transition(':enter', [ 
    style({'flex-grow': '0.001'}), 
    animate(500, style({'flex-grow': '1'})), 
]), 
transition(':leave', [ 
    style({width: '*', 'max-width': '*'}), 
    animate(500, style({width: 0, 'max-width': 0})), 
]), 

Plunker

내가 슬라이딩 헤더를 해결할 수있는 방법 어떤 아이디어가?

Answer 1

해결 방법은 입력 요소에도 애니메이션을 적용하는 것이 었습니다. 이 경우에만 width 속성은 애니메이션 할 필요가 :

trigger('anim', [ 
    transition(':enter', [ 
     style({width: 0}), 
     animate(250, style({width: '*'})), 
    ]), 
    transition(':leave', [ 
     style({width: '*'}), 
     animate(250, style({width: 0})), 
    ]), 
    ]), 

Plunker