Question

我想根据要去的路线进行路线转换：

例如，如果我当前的路线是家，而我要大约，我想将.myClass颜色设置为绿色。

但是如果我当前的路线是家，并且我要去项目，我想将.myClass颜色设置为红色。

我尝试了类似的方法，但这不起作用：

transition('about => home', [ /* doesnt work, must use :enter */
    query('.block', style({ opacity: 0 })),
    query('.block', stagger(300, [
      style({ transform: 'translateY(100px)' }),
      animate('1s cubic-bezier(.75,-0.48,.26,1.52)', style({transform: 'translateY(0px)', opacity: 1})),
    ])),
  ]),

这是我的Stackblitz https://stackblitz.com/edit/angular-motion-v6-final-wbhot5?file=app%2Fhome.component.ts

感谢您的帮助

Answer 1

我在您的Stackblitz中没有看到任何项目。我也没有看到“ .myClass”。因此，这是一个简单的示例（在router.animation.ts文件中使用此示例），以查看背景从红色变为绿色。也许它将帮助您建立所需的东西。

import { sequence, trigger, state, stagger, animate, style, group, query as q, 
transition, keyframes, animateChild } from '@angular/animations';
const query = (s, a, o = { optional: true }) => q(s, a, o);

export const routerTransition = trigger('routerTransition', [
  state('about', style({ opacity: 1, backgroundColor: 'red' })),
  transition('home=>about', [ // void <=> *
    animate('1.0s ease-in-out')
  ]),
  state('home', style({ opacity: 1, backgroundColor: 'green' })),
  transition('about=>home', [ // void <=> *
    animate('1.0s ease-in-out')
  ])
]);

Angular 6路线过渡取决于路线状态（stackblitz）

1 个答案: