web-dev-qa-db-fra.com

Angular les animations de transition de routeur glissent à gauche et à droite conditionnellement

J'ai lu cet article sur les animations de transition de routeur pour Angular:

https://medium.com/google-developer-experts/angular-supercharge-your-router-transitions-using-new-animation-features-v4-3-3eb341ede6c8

Et:

Angular 2 "diapositive dans l'animation" d'un composant routé

Cependant, c'est trop statique. Je veux qu'il glisse à gauche et à droite en fonction de l'ordre des onglets.

Est-il possible de créer des animations de routeur pour cela? Voici un exemple de ce que je veux dire:

https://material.angular.io/components/tabs/examples

Regardez comme il glisse À LA FOIS à gauche et à droite très naturellement en fonction de l'onglet sur lequel vous vous trouvez.

Cela doit être dynamique, car les onglets seront ajoutés au moment de l'exécution.

angularangular-routingangular-animations
6
Dolan

Aujourd'hui, les choses sont un peu plus simples car de nouveaux alias d'animation existent sous la forme: increment et: décrémenter . Des alias ont été introduits dans Angular 5 . Ma solution modifiée est donc la suivante:

    @Component({
      selector: 'app-workspace-container',
      templateUrl: './workspace-container.component.html',
      styleUrls: ['./workspace-container.component.scss'],
      animations: [
        trigger('animRoutes', [
          transition(':increment', right),
          transition(':decrement', left),
        ]),
      ],
  })
  export class ComponentContainingRouterOutlet implements OnDestroy, OnInit {
    //... ngOnInit,ngOnDestroy

    constructor( private route: ActivatedRoute ) { }

    animationState: number;

    onActivate($event) {
      this.animationState = this.route.firstChild.snapshot.data['routeIdx'];
    }
  }

Animation d'appel à la position du routeur-prise:

<div [@animRoutes]="animationState">
  <router-outlet (activate)="onActivate($event)"></router-outlet>
</div>

modifier les itinéraires comme exemple, regardez data: { routeIdx: X }:

    const routes: Routes = [
      {
        path: 'routeOne',
        component: ComponentOne,
        data: { routeIdx: 0 }
      },
      {
        path: 'routeTwo',
        component: ComponentTwo,
        data: { routeIdx: 1}
      },
      {
        path: 'routeThree',
        component: ComponentThree,
        data: { routeIdx: 2 }
      },
      {
        path: 'routeFour',
        component: ComponentFour,
        data: { routeIdx: 3 }
      },
      {
        path: '',
        redirectTo: 'routeOne',
        pathMatch: 'full'
      }
    ]
5
Michal.S

J'ai réussi à obtenir que cela fonctionne en "simulant" l'état dans lequel il se trouve.

Dans le component.html:

<div [@animRoutes]="pageState">
   <router-outlet></router-outlet>
</div>

pageState est une variable dans le fichier component.ts.

Chaque fois que je clique sur un onglet sur lequel je veux aller à droite, je règle pageState sur right, et idem pour left, et je laisse Angular prendre en charge le reste.

Remarque: Vous devez créer un état right et right1 sous la forme d'un hack , car Angular ne prend actuellement pas en charge les transitions d'état right => right !! Il en va de même pour left bien sûr.

Mon annotation @Component est ci-dessous:

@Component({
    selector: 'app-workspace-container',
    templateUrl: './workspace-container.component.html',
    styleUrls: ['./workspace-container.component.scss'],
    animations: [
        trigger('animRoutes', [
            transition('* => right', right),
            transition('* => left', left),
            transition('* => right1', right),
            transition('* => left1', left),
        ]),
    ],
    changeDetection: ChangeDetectionStrategy.OnPush,
})

Où left, left1, right, right1 sont:

const left = [
    query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
    group([
        query(':enter', [style({ transform: 'translateX(-100%)' }), animate('.3s ease-out', style({ transform: 'translateX(0%)' }))], {
            optional: true,
        }),
        query(':leave', [style({ transform: 'translateX(0%)' }), animate('.3s ease-out', style({ transform: 'translateX(100%)' }))], {
            optional: true,
        }),
    ]),
];

const right = [
    query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
    group([
        query(':enter', [style({ transform: 'translateX(100%)' }), animate('.3s ease-out', style({ transform: 'translateX(0%)' }))], {
            optional: true,
        }),
        query(':leave', [style({ transform: 'translateX(0%)' }), animate('.3s ease-out', style({ transform: 'translateX(-100%)' }))], {
            optional: true,
        }),
    ]),
];

TL; DR: Transformez l'état que vous allez en variable , afin que vous puissiez définir de manière dynamique l'état que vous souhaitez. 

0
Dolan