Анимации угловой маршрутизации время от времени воспроизводятся на мобильном Chrome

Question

Мне настроили анимацию маршрутизации для всех страниц моего приложения, то есть каждый компонент, на который можно направить, имеет

@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%)'
                }))
            ])
        ])
    ]
})

в их .ts файл и

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

в своем шаблоне. Таким образом, теоретически каждая страница должна лететь слева и выходить на правую сторону экрана. Это отлично работает на настольном Chrome, без исключений.

Однако на моем планшете под управлением мобильного Chrome 55.0.2883.91 (рабочий стол: .87) анимация воспроизводится только при некоторых просмотрах и, по-видимому, только при первом посещении этой страницы. Я что-то здесь упускаю для мобильных браузеров?

Это с Angular 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>