사이드 메뉴 및 모달의 애니메이션

Question

하단 및 insliding 사이드 메뉴 또는 아래쪽에서 위로 움직이는 모달 상자 (Ionic2 모달)의 애니메이션은 매우 빠르고 부드럽습니다.

이제 플로팅 액션 버튼에 대한 내 자신의 애니메이션을 정의했습니다. 이 애니메이션은 이온 애니메이션보다 훨씬 느립니다. 그 차이점은 무엇입니까?

왜 내 애니메이션이 약간 뒤떨어 지나요?

animations: [ 
    trigger('heroState', [ 
     state('false', style({ 
     right: '-500px', 
     })), 
     state('true', style({ 
     right: '0px', 
     })), 
     transition('false => true', animate('500ms ease-in')), 
     transition('true => false', animate('500ms ease-out')) 
    ]) 
    ], 

Answer 1

@rakete : 나는 이온 사용을 모달 애니메이션을 통해 속도를 제어 할 수있는 다른 차 베 지어 생각합니다. 아래에서해볼 수 있습니까?

transition('false => true', animate('500ms cubic-bezier(0.65, 0.05, 0.36, 1)') 

그리고

transition('false => true', animate('500ms cubic-bezier(0.36, 0.66, 0.04, 1)') 

더 읽기 : Cubic Bezier
Codepen을 : cubic-bezier(0.36, 0.66, 0.04, 1)이