Question

问题： 角度4 - 使用角度动画在路线变化方面淡入淡出

问题：

目前，视图在网站上载时淡化，但在路线改变时则不会。我希望视图也能在路径变化时淡入淡出。

这是我的HTML :(问题可能在这里???）

  <div class="page" [@fadeInTransition]>
    <router-outlet></router-outlet>
  </div>

这是我的应用组件：

import { Component, HostBinding  } from "@angular/core";
import { Router, ActivatedRoute } from "@angular/router";
import { MetadataService } from 'ng2-metadata/index';

import { fadeAnimation } from "./animations/fade.animation";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  animations: [fadeAnimation()] 
})

export class AppComponent {
    @HostBinding('@fadeInTransition') fadeInTransition;

    constructor(private route: ActivatedRoute, private router: Router, private metadataService: MetadataService) {
    }
}

这是我的动画（我导入）：

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

export function fadeInAnimation() {
    return trigger('fadeInTransition', [
        transition(':enter', [
            style({ opacity: 0 }),
            animate('2s', style({ opacity: 1 }))
        ])
    ]);
}

Answer 1

这不是干，但是..将以下内容添加到每个组件中。

import { fadeAnimation } from "./animations/fade.animation";

@Component({
  selector: "app-some-other-component",      
  animations: [fadeAnimation()] 
})

@HostBinding('@fadeInTransition') fadeInTransition;

角度4 - 使用角度动画在路线变化方面淡入淡出

1 个答案: