Question

我需要一个组件（品牌名称）以基于角度的先前路线进行动画处理。就是说，当先前的路径是原点时，则应从右侧加载组件，如果先前的路径是品牌模型，则应从左侧加载组件。我想在组件本身中添加代码进行动画处理。

我可以使用该服务获取组件中的上一条路线

import { Injectable } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class RouteService {

 private previousUrl: string;
 private currentUrl: string;

 constructor(private router: Router) {
   this.currentUrl = this.router.url;
   router.events.subscribe(event => {
     if (event instanceof NavigationEnd) {
       this.previousUrl = this.currentUrl;
       this.currentUrl = event.url;
     }
   });
 }

 public getPreviousUrl() {
   return this.previousUrl;
 }
}

但是在加载页面后无法进行动画处理。有什么办法可以做到这一点？

Answer 1

常规信息：：您的动画需要一些状态，可用于将页面转换为左或右。关于导航方向的信息由路由器希望提供。这始终取决于您如何实现内部浏览器。

想法1：

通过检查路由参数的数量并将其与以前的参数进行比较，来获取动画方向（在路径中找到 / 的数量）。

想法2：

Fill in the router with extra informations

动画实现：

state('neutral', style({transform: 'translateX(0%)'}),
state('up',  style({transform: 'translateX(-100%)'}),
state('down',  style({transform: 'translateX(100%)'}),
transition('neutral => up', animate('500ms')),
transition('up => neutral', animate('500ms')),
transition('neutral => down', animate('500ms')),
transition('down => neutral', animate('500ms'))

根据先前的路线页面添加不同的动画

1 个答案: