각도 4 부드러운 애니메이션

Question

저는 통계, 차트 등 다른 애니메이션을 사용하는 다른 카드로 각도 4로 홈페이지를 만들려고합니다. 차트 카드의 경우 아이콘 버튼을 사용하여 div를 더 크게 (전체 화면처럼) 전환 할 수 있습니다. 애니메이션 코드는 현재이 방식으로 작동합니다

state('small', style({position: 'relative', width: '50%'})), 
state('large', style({ 
    transform: 'translateY(-150px)', 
    position: 'absolute', 
    width: '100%' 
})), 
transition('small => large', animate('600ms ease', keyframes([ 
    style({position: 'absolute', width: '100%', offset: 0}), 
    style({transform: 'translateY(-150px)', offset: 1.0}), 
]))), 
transition('large => small', animate('600ms ease', keyframes([ 
    style({transform: 'translateY(-150px)', offset: 0}), 
    style({width: '50%', right: 0, offset: 1.0}), 
]))) 

첫 단계부터 예상대로이 작동하지 않습니다 (작은 => LAGE) 폭이 애니메이션되지 않습니다, 그리고 역 애니메이션 번역 중 하나가 아닙니다. 나는 "더 매끄러운"뭔가를하고 싶다. 그러나 나는 그것을 만들기 위해 며칠 동안 고생하고있다.

여기

내가했고, 다른 일을 해봤 (주석) 무엇을 보여주기 위해 만든 (첫번째 plunkr 나 X를 판단하지 않는다) 당신의 도움에 대한

감사 quick plunkr입니다!

Answer 1

키 프레임을 사용하지 않고 쉽게 전환 효과를 사용하여 원하는 애니메이션 효과를 얻을 수있을 것입니다. 당신이 국가와 graphAnimation 트리거 이러한 변화와 함께 plunkr을 편집한다면 :

animations: [ 
     trigger('panelAnimation', [ 
      state('in', style({transform: 'translateX(0)'})), 
      transition('void => *', animate('600ms ease-in', keyframes([ 
       style({opacity: 0, offset: 0}), 
       style({opacity: 1, offset: 1.0}) 
      ]))) 
     ]), 
     trigger('graphAnimation', [ 
      state('small', style({ 
       position: 'absolute', 
       right: 0, 
       width: '50%' 
       transform: 'translateY(0px)' 
      })), 
      state('large', style({ 
       transform: 'translateY(-150px)', 
       position: 'absolute', 
       right: 0, 
       width: '100%' 
      })), 
      transition('small => large', animate('600ms 0.2ms ease-in-out')), 
      transition('large => small', animate('600ms 0.2ms ease-in-out')) 


     ]) 
    ] 

당신은 당신이 찾고있는 영향을주는 것을. 또는 그룹을 사용하여 독립적 인 애니메이션 타이밍을 허용 할 수 있습니다.