Question

我有一个页面，上面有项目列表。当您单击项目时，您将激活routerlink，并将您转到特定滚动位置的另一页。但是最近我在页面上的所有过渡中添加了角度动画。现在，动画将停止scrollIntoView并将其转移到页面顶部。我仍然想让过渡工作，但我也想保持我的scrollIntoView功能。

这是我要在scrollIntoView正常工作的情况下转换的页面的TS文件。

ngOnInit() {
  this.route.fragment.subscribe(fragment => { this.fragment = fragment; });
}

ngAfterViewChecked(): void {
    try {
        if ( this.fragment) {
            document.querySelector('#' + this.fragment).scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    } catch (e) { }
  }

我正在使用id属性过渡到页面上的特定位置。

<div *ngFor="let work of works">
        <app-work [work]="work" [attr.id] = "work.Title" ></app-work>
    </div>

这是路由器模块的外观。

const routes: Routes = [
  { path: '', component: TimelineComponent, data: { animation: 'home' }},
  { path: 'Projects', component: ProjectsComponent, data: { animation: 'projects' } },
  { path: 'Education', component: EducationComponent, data: { animation: 'education' } },
  { path: 'Resume', component: ResumeComponent, data: { animation: 'resume' } },
  { path: 'Jobs', component: JobsComponent, data: { animation: 'jobs' } },
  { path: 'Contact', component: ContactComponent, data: { animation: 'contact' } },
  { path: 'Snapchat', component: SnapchatComponent, data: { animation: 'snapchat' } }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled',
    anchorScrolling: 'enabled',
  }) ], // after routes, { enableTracing: true}
  exports: [RouterModule]
})
export class AppRoutingModule { }

ScrollIntoView本身可以正常工作。但是一旦添加动画，它就会中断。

这是我在routerlink上使用片段调用scrollintoview的方式。

<li [routerLink]="['./Jobs']" fragment="Destime">

但是我没有添加动画。

animations: [
    trigger('routerAnimation', [
      transition('* <=> *', [
        query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
         group([
            query(':enter', [
              style({ transform: 'translateX(100%)' }),
              animate('0.5s ease-in-out', style({ transform: 'translatey(0%)' }))
            ], { optional: true }),
            query(':leave', [
              style({ transform: 'translateX(0%)' }),
              animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
            ], { optional: true }),
          ])
        ])
      ])
  ]

 getRouteAnimation(outlet: RouterOutlet): string {
    return outlet.activatedRouteData['animation'] || 'no-animation';
  }

很长的帖子，很抱歉，但是我的问题是如何仅在特定的路由器链接上禁用动画？

例如：

<li [routerLink]="['./Jobs']" fragment="Destime">

或者我该如何改善动画，以便在动画之后仍然可以执行滚动？

注意我已经过渡到同一页面，所以禁用整个页面上的动画，例如* =>该页面，将无法工作。因为我通常需要使用动画来访问它。

如何在有角动画路由器过渡的同时以角度滚动IntoView？

0 个答案: