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>

角度路由动画在移动Chrome上偶尔播放

1 个答案: