代码之家 › 专栏 › 技术社区 › MichelDelpech

角度6路由转换取决于路由状态(stackblitz)

transition routes animation angular

1

MichelDelpech · 技术社区 · 8 年前

我想根据我要去的路线执行路线转换:

我要去 ,我想把我的课的颜色设为绿色。

但如果我现在的路线是家我要去 ,我想把我的课的颜色设为红色。

我试过这样的方法,但没用:

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})),
    ])),
  ]),

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

谢谢你的帮助

1 回复 | 直到 8 年前

1

0

Kevin Welsh 8 年前

我没有在你的堆栈闪电战中看到项目。我也没看到“.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')
  ])
]);