0

我为我的应用程序的所有页面设置了路由动画，也就是说，每个可以路由到的组件都有

@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 的。

4

1 回答 1

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>
于 2016-12-28T10:57:07.283 回答