4

我有一个页面，上面有项目列表。当您单击项目时，您将激活路由器链接，您将被转移到特定滚动位置的另一个页面。但最近我为页面上的所有过渡添加了角度动画。动画现在停止 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">

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

注意我有到同一页面的转换，因此禁用整个页面上的动画，如 * => thepage，将不起作用。因为我通常需要使用动画来访问它。

4

0 回答 0