我正在尝试使用Angular动画(Angular 7)添加页面动画效果。它在一些页面上有效,但是在其他一些页面上每次触发动画时都会自动重新加载。
例如,我从“/data/test-data”导航到“/data/execute-model”,“execute-model”将首先被加载,并且ngOnInit被触发,但是url会更改为“/data/execute-model?”并刷新页面。我不知道这个“?”来自哪里。一旦我删除了动画,导航即可正常工作而无需重新加载页面。
对于那些有效的页面,它们具有完全相同的配置。我不确定问题出在哪里。
顺便说一句,只有当我使用按钮进行导航时才会出现这种情况,点击按钮时触发this.router.navigate(['/data/execute-model']);
如果我输入URL,则动画效果可以正常工作且无需重新加载。但这不是我想要的。
非常感谢您的帮助!
这是HTML:
div class="content-area" [@routeAnimations]="prepareRoute(outlet)">
<router-outlet #outlet="outlet"></router-outlet>
</div>
这是组件ts代码:它将stateChangeExpr作为字符串返回,以用于动画触发器。
prepareRoute(outlet: RouterOutlet) {
return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
}
这是animation.ts文件:
export const slideInAnimation = trigger('routeAnimations', [
transition(
'*<=>*',
[
style({ position: 'relative' }),
query(':enter, :leave', [
style({
position: 'inherit',
width: '100%'
})
]),
query(':enter', [style({ right: '-100%' })]),
query(':leave', animateChild(), { optional: true }),
group([
query(':leave', [animate('350ms ease-out', style({ right: '100%' }))], { optional: true }),
query(':enter', [animate('350ms ease-out', style({ right: '0%' }))])
]),
query(':enter', animateChild())
]
)
]);