时间戳

首页 > 解决方案 > 根据上一个路由页面添加不同的动画

angular - 根据上一个路由页面添加不同的动画

问题描述

我需要一个组件（品牌名称）来根据以前的角度路线进行动画处理。也就是当前一个路由是home时，组件应该从右加载，如果前一个路由是brand model，那么组件应该从左加载。我想在组件本身中添加代码来制作动画。

我可以使用该服务在组件中获取先前的路由

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;
 }
}

但加载页面后无法动画。有什么办法可以做到这一点？

标签： angularangular-animations

解决方案

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

想法1：

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

想法2：

用额外的信息填写路由器

动画实现：

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'))

推荐阅读