Как использовать анимацию в Angular2 для маршрутизатора Compoenents

Question

Я хочу анимировать мои компоненты при изменении ссылки активного маршрутизатора. Как написать код кода анимации, чтобы при изменении роутера компонент погас, а затем исчезает?

Код, который я пытался, следующий.

@Component({ 
    selector: 'app-component', 
    templateUrl: './component.component.html', 
    animations: [trigger(
    'openClose', 
    [ 
     transition(":enter", [ 
     style({ opacity: 0 }), 
     animate('2000ms', style({ opacity: 1 })) 
     ]), 
     transition(":leave", [ 
     animate('2000ms', style({ opacity: 0 })) 
     ]) 
    ])] 
}) 

Но я думаю, что я понятия не так, как я пытаюсь использовать этот кусок кода, по крайней мере, 2-х компонентов, но ни один из них не исчезает или наружу.

Это возможно сделать с этой функцией или я решаю проблему с неправильным способом?

Answer 1

Ваш код кажется правильным для меня, вам просто нужно привязать анимацию к компоненту. Есть два способа:

Добавьте его в шаблон, например, в DIV:

<div class="container" [@openClose]="'true'"> 
    ... 
</div> 

Или непосредственно применить его к компоненту хоста (<app-component>):

@Component({ 
    selector: 'app-component', 
    templateUrl: './component.component.html', 
    animations: [trigger(
    'openClose', 
    [ 
     transition(":enter", [ 
     style({ opacity: 0 }), 
     animate('2000ms', style({ opacity: 1 })) 
     ]), 
     transition(":leave", [ 
     animate('2000ms', style({ opacity: 0 })) 
     ]) 
    ])], 
    host: { 
     '[@openClose]': 'true', 
     'style': 'display: block;' 
    }, 
}) 

Анимация работает по компоненту, поэтому вам нужно объявить анимацию в обоих из них.

Осаждение отпуска не может быть замечено при изменении состояния. В официальной документации приведен пример на how to use animations in route components

Надеюсь, это поможет!

Answer 2

Пример с угловыми 4

Вот как я реализовал замирание в анимации на моем пути компонентной дома

import { Component } from '@angular/core'; 

import { fadeInAnimation } from '../_animations/index'; 

@Component({ 
    moduleId: module.id.toString(), 
    templateUrl: 'home.component.html', 
    animations: [fadeInAnimation], 
    host: { '[@fadeInAnimation]': '' } 
}) 

export class HomeComponent { 
} 

Это анимация определяется в отдельном файле

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

export const fadeInAnimation = 
    trigger('fadeInAnimation', [ 
     // route 'enter' transition 
     transition(':enter', [ 

      // styles at start of transition 
      style({ opacity: 0 }), 

      // animation and styles at end of transition 
      animate('.3s', style({ opacity: 1 })) 
     ]), 
    ]); 

Для других анимаций и живой демо вы можете посмотреть this post