Question

我想动态更改路线动画。我在app.component.ts中有4个动画，当我点击按钮时我会得到一些动画类型的值，因为我会改变动画。例如，如果我得到1，我将应用slideLeft，如果2将应用slideRight，依此类推。但.... 但我无法动态更改路线动画。我正在更新动画阵列，但我认为角度路由器仅在第一次拍摄动画值。之后，即使currentAnimation的值被更改，它也不会更新动画。

我的app.component.ts

import { ComponentsModelService } from './components-model.service';
import { Router, NavigationEnd, NavigationStart } from "@angular/router";
import 'rxjs/add/operator/filter';
import { Component, Directive,HostBinding, HostListener, OnInit } from '@angular/core';
import {trigger, query, transition, style, animate, state, group} from '@angular/animations';


const slideToRight = [
    query(':enter, :leave', style({ position: 'fixed', left: 0, right: 0, top: 0, bottom: 0 }),{ optional: true }),
    query(':leave', style({ transform: 'translateX(0%)' }), { optional: true }),
    query(':enter', style({ transform: 'translateX(-100%)' }),{ optional: true }),
    group([
        query(':leave', [
            animate('500ms ease-in-out', style({ transform: 'translateX(100%)' })),
        ], { optional: true }),
        query(':enter', [
            animate('500ms ease-in-out', style({ transform: 'translateX(0%)' })),
        ],{ optional: true })
    ])
];

const slideToLeft = [
    query(':enter, :leave', style({ position: 'fixed', left: 0, right: 0, top: 0, bottom: 0 }),{ optional: true }),
    query(':leave', style({ transform: 'translateX(0%)' }), { optional: true }),
    query(':enter', style({ transform: 'translateX(100%)' }),{ optional: true }),
    group([
        query(':leave', [
            animate('500ms ease-in-out', style({ transform: 'translateX(-100%)' })),
        ], { optional: true }),
        query(':enter', [
            animate('500ms ease-in-out', style({ transform: 'translateX(0%)' })),
        ],{ optional: true })
    ])
];

const slideToTop = [
    query(':enter, :leave', style({ position: 'fixed', left: 0, right: 0, top: 0, bottom: 0 }),{ optional: true }),
    query(':leave', style({ transform: 'translateY(0%)' }), { optional: true }),
    query(':enter', style({ transform: 'translateY(100%)' }),{ optional: true }),
    group([
        query(':leave', [
            animate('500ms ease-in-out', style({ transform: 'translateY(-100%)' })),
        ], { optional: true }),
        query(':enter', [
            animate('500ms ease-in-out', style({ transform: 'translateY(0%)' })),
        ],{ optional: true })
    ])
];

const slideToBottom = [
    query(':enter, :leave', style({ position: 'fixed', left: 0, right: 0, top: 0, bottom: 0 }),{ optional: true }),
    query(':leave', style({ transform: 'translateY(0%)' }), { optional: true }),
    query(':enter', style({ transform: 'translateY(-100%)' }),{ optional: true }),
    group([
        query(':leave', [
            animate('500ms ease-in-out', style({ transform: 'translateY(100%)' })),
        ], { optional: true }),
        query(':enter', [
            animate('500ms ease-in-out', style({ transform: 'translateY(0%)' })),
        ],{ optional: true })
    ])
];

var currrentAnimation = slideToTop;

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    animations: [
        trigger('routeTransition', [
            transition("* => *", currrentAnimation)
        ])
    ]
})

export class AppComponent {
    ios: boolean;
    iosClass: string = "";
    previousUrl: string: "";
    count: number = 1;
    constructor(private router: Router) {
        console.log("in contrcutore");
        this.ios = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
        if(this.ios == true) {
            this.iosClass = "ios";
        }
    }
    getState(outlet) {
       return outlet.activatedRouteData.state;
    }
    changeAnimation(){

        /* Changing animation object here but it is not working */
        console.log("button clicked2222222222");
        currrentAnimation = slideToRight;
        var navigateToPage = "page3";
        this.router.navigate([navigateToPage]);
    }
};

app.component.html

<link href="https://fonts.googleapis.com/css?family=Roboto:100i" rel="stylesheet">
<!-- use the font -->
<style>
body {
    font-family: 'Maven Pro', sans-serif;
}
html, body,
main {
    position: relative;
    width: 100%;
    height: 100%;
}

</style>
<main [@routeTransition]="getState(o)">
    <router-outlet  #o="outlet"></router-outlet>
</main>
<button (click) ="changeAnimation()">Change Animation</button>

现在在changeAnimation上我正在将currentAnimation更新为slideToRight但是在路由更改时，slideToTop正在运行。我无法理解为什么changeAnimation不会改变动画。

更新：我解决了

动态更新动画数组不会解决问题。在回答之前，你需要了解角度路线动画的工作原理。

1-过渡（“* =＆gt; *”，currrentAnimation）你看到* =＆gt; *表示如果你有两条路线让我们说'route1'和'route2'那么*将表示它们中的任何一条像'route1 =＆gt;如果路线不同，route2'和*将应用动画*（请注意这一点）。 'route1'和'route2'变量在getState函数中计算：

getState(outlet) {
           return outlet.activatedRouteData.state;
        }

所以无论我们从这里返回什么，都会匹配路线'source =＆gt;目的地'目的地变量。那么如果我可以更改目标变量怎么办呢。

2-所以我想如果我为[@routeTransition] =“myVarible”声明一个变量并且会更新它们它们应该工作。但它没有用。我不知道为什么。

3-所以我创建了一个用于设置和获取动画名称的公共服务。

import { Injectable } from '@angular/core';
import {trigger, query, transition, style, animate, state, group} from '@angular/animations';

@Injectable()
export class AnimationControllerService {

  currentAnimation: any = null;
  currentAnimationId: number = -1;
  public animations: any;
  constructor() {

  }
  setCurrentAnimation(animationId) {
    var nextAnimation = "";
    var isDuplicate = false;

    switch(animationId) {
        case 1:
            nextAnimation = "slideToLeft";
            break;
        case 2:
            nextAnimation = "slideToRight";
            break;
        case 3:
            nextAnimation = "slideToTop";
            break;
        case 4:
            nextAnimation = "slideToBottom";
            break;
    }
    if(this.currentAnimation && (this.currentAnimation.indexOf("Duplicate") > -1)) {
        isDuplicate = true;
    }

    /* add duplicate if previous animation otherwise animation will not work */
    if((animationId == this.currentAnimationId) && !isDuplicate) {
        nextAnimation = nextAnimation + "Duplicate";
    }
    this.currentAnimation = nextAnimation;
    this.currentAnimationId = animationId;
  }
  getCurrentAnimation() {
    return this.currentAnimation;
  }
}

正如你所看到的，我设置了重复的动画名称，因为我之前的动画是slideLeft，我再次想要slideLeft然后它将无法正常工作，因为“* =＆gt; *”如果获得不同的参数就可以工作。

4-现在app.component.html

<main [@routeTransition]="getAnimation()">
    <router-outlet></router-outlet>
</main>

5-现在app.component.ts看起来像

import { AnimationControllerService } from './animationcontroller.service';
import { Component, Directive,HostBinding, HostListener, OnInit } from '@angular/core';
import 'rxjs/add/operator/filter';
import {trigger, query, transition, style, animate, state, group} from '@angular/animations';

const slideToRight = // animation code same as question
const slideToLeft = // animation code same as question

const slideToTop =// animation code same as question

const slideToBottom = // animation code same as question


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    animations: [
        trigger('routeTransition', [
            transition("* => slideToLeft", slideToLeft),
            transition("* => slideToRight", slideToRight),
            transition("* => slideToTop", slideToTop),
            transition("* => slideToBottom", slideToBottom),
            transition("* => slideToLeftDuplicate", slideToLeft),
            transition("* => slideToRightDuplicate", slideToRight),
            transition("* => slideToTopDuplicate", slideToTop),
            transition("* => slideToBottomDuplicate", slideToBottom),
        ])
    ],
})

export class AppComponent {
    ios: boolean;
    iosClass: string = "";
    constructor(private animService: AnimationControllerService) {

    }
    getAnimation() {
        return this.animService.getCurrentAnimation();
    }
};

6 - 现在，您可以通过简单地注入课程并设置当前动画然后导航到您的路线，轻松导航到任何路线。这么简单

this.animService.setCurrentAnimation(1);
this.router.navigate([navigateToPage]);

角度路线动画动态变化

0 个答案: