각도 라우팅 애니메이션은 모바일 크롬에 산발적으로 재생

Question

I, 즉,에 라우팅 할 수있는 모든 구성 요소는

자신의 .ts 파일

@Component({ 
    selector: '...', 
    templateUrl: '...', 
    styleUrls: ['...'], 
    animations: [ 
     trigger('flyInOut', [ 
      state('in', style({ opacity: 1, transform: 'translateX(0)' })), 
      transition('void => *', [ 
       style({ 
        opacity: 0, 
        transform: 'translateX(-100%)' 
       }), 
       animate('0.3s ease-in') 
      ]), 
      transition('* => void', [ 
       animate('0.3s 10 ease-out', style({ 
        opacity: 0, 
        transform: 'translateX(100%)' 
       })) 
      ]) 
     ]) 
    ] 
}) 

및

을 내 응용 프로그램의 모든 페이지에 대한 설정 라우팅 애니메이션을 가지고있어

<section [@flyInOut]="active"> 
    ... 
</section> 

템플릿에 있습니다. 따라서 이론 상으로는 모든 페이지가 왼쪽에서부터 들어가서 화면의 오른쪽으로 나가야합니다. 이 기능은 데스크톱 Chrome에서도 완벽하게 작동하며 예외는 아닙니다.

하지만 모바일 타블렛을 실행하는 태블릿에서는 일부보기에서만 모바일 Chrome 55.0.2883.91 (데스크톱 : .87) 애니메이션이 재생되고 겉보기에는 해당 페이지를 처음 방문했을 때만 나타납니다. 모바일 브라우저에서 여기에 뭔가 빠졌습니까?

이것은 4.0.0-beta.1의 각도입니다.

Answer 1

작동해야합니다. 정확한 이유를 모르겠다. 확실하지 않지만 아래 사항을 시도해 볼 수 있습니다 (). 아무 것도 변경하지 않으면 다른 방법으로 수행 할 수 있습니다.).

animations: [ 
     trigger('flyInOut', [ 

      <!--- not required at all -----------> 
       state('in', style({ opacity: 1, transform: 'translateX(0)' })), 
      <!--- not required at all -----------> 

      transition(':enter', [  //<<---changed line but same thing. 
       style({ 
        opacity: 0,   //<<---not sure with opacity. if view doesn't come up, change it to 1 
        transform: 'translateX(-100%)' 
       }), 
       animate('0.3s ease-in') 
      ]), 
      transition(':leave', [  //<<---changed line but same thing. 
       animate('0.3s 10 ease-out', style({ 
        opacity: 0, 
        transform: 'translateX(100%)' 
       })) 
      ]) 
     ]) 
    ] 


<section [@flyInOut]> //<<----if you are not using active state/variable anywhere then remove it 
    ... 
</section>