相关疑难解决方法(0)

而不是将动画附加到正在路由到的每个组件,例如在此StackOverflow答案中,或者在官方文档的第一部分中.一个例子:

在hero-detail.component.ts:

import { Component, OnInit } from '@angular/core';
import { fadeInOutAnimation } from "app/app-routing.animation";

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  animations: [
    fadeInOutAnimation(300)
  ]
})
export class HomeComponent{       

}

Run Code Online (Sandbox Code Playgroud)

在app-routing.animation.ts:

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

export const fadeInOutAnimation = function (fadeInTimeMS) {
  return trigger('fadeInOut', [
    transition(':enter', [   // :enter is alias to 'void => *'
      style({ opacity: 0 }),
      animate(fadeInTimeMS, style({ opacity: 1 }))
    ]), …

Run Code Online (Sandbox Code Playgroud)

在官方文档的帮助下使用Angular 2 Animate(RC2),以及Matias在YT频道上使用的月份ng-conf动画视频中使用的代码.

除了最重要的部分,我得到了一切工作:

在更改routerlinks/components时,我似乎无法获得离开转换/动画.使用'*=> void'不会做任何事情.路由器在视图中销毁组件而不考虑动态离开转换并引入新的routerlink /组件.

我让进入的动画工作,但不是离开的动画.

我认为路由器不会自动检测到组件的离开动画(类似于ng-leave ng-leave-active),因此我错过了一个步骤,这不是一个优秀的黑客.

所有的plunker示例,官方示例和ng-conf Matias one示例都显示了它们,没有任何路由器交互:所有进入/离开状态和转换示例都在同一个组件中.

** Edit::: [Plunker Demo Here] http://plnkr.co/edit/IJoaB7ifVPJqX0NrUIpV

您会注意到,即使指定了过渡'*=> void',路由器链接的更改也会完全忽略它

ng2动画基本上没有帖子,所以这是唯一的方法.

感谢您抽出宝贵时间阅读本文.感谢帮助.

我已经阅读了有关Angular的路由器过渡动画的这篇文章:

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

和:

路由组件的Angular 2"动画幻灯片"

但是,这太静止了.我希望它左右滑动,并根据标签的顺序正确.

是否可以为此创建路由器动画？我的意思是下面的例子:

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

看看它是如何载玻片BOTH左和右很自然地取决于你是什么标签.

这必须是动态的,因为选项卡将在运行时添加.

我想我已经连接了基本的动画部分,我只需要知道要处理的事件.理想情况下,我想要一个我可以在导航级别使用的解决方案,所以我可以包装我的所有组件,但一个简单的页面加载示例就足够了,非常感激.我在SO上发现了其他一些相关问题,但它们似乎没有回答我的具体问题或过时:

使用Angular 2.0路由器和组件接口承诺的路由组件页面过渡动画的Angular 2"动画幻灯片"

这是我到目前为止:

html文件

<article @heroState="componentState">
           <p>article element should fade in/out</p>
</article>

零件

@Component({
    selector: 'blog-about',
    templateUrl: './app/about/about.html',
    animations: [
        trigger('heroState', [
            state('active', style({
                backgroundColor: 'blue',
                transform: 'scale(1)'
            })),
            state('inactive', style({
                backgroundColor: 'green',
                transform: 'scale(1.1)'
            })),
            transition('active => inactive', animate('1000ms ease-in')),
            transition('inactive => active', animate('1000ms ease-out'))
        ])
    ]
})
export class About implements OnInit, OnDestroy {
    public componentState: string;
    public Title: string

    constructor() {
        this.Title = "this is about";
    }

    ngOnInit()
    {
        this.componentState = 'inactive'; …

我按照这个答案为我的 Angular 6 + Material 应用程序创建了一个路由动画，但我将动画更改为这个：

const fade = [
// route 'enter' transition
  transition(':enter', [
    // css styles at start of transition
    style({ opacity: 0 }),
    // animation and styles at end of transition
    animate('.3s', style({ opacity: 1 }))
  ])
];

这是中的代码app.component.ts：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('routerAnimations', [
      transition('* => *', fade)
    ])
  ]
})
export class AppComponent {
  prepareRouteTransition(outlet) {
    const animation = outlet.activatedRouteData['animation'] || {};
    return animation['value'] || …