角度路由动画在移动 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>