Error creating animation between routes using Angular 5

Question

Error creating animation between routes using Angular 5

Navigation

#1 by (1 votes)

0

I'm making an application that uses the most current Angular (v5) structure. I had already done the BrowserAnimationsModule implementation in previous versions and I had no problems but unfortunately I can not create this animation. My code is below:

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// app module element'ss
import { AppRouterModule } from './app.router';
import { AppComponent } from './app.component';

import { RegistrarComponent } from './registrar';
import { EntrarComponent } from './entrar';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [
        RegistrarComponent,
        EntrarComponent,
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        AppRouterModule,
    ],
})
export class AppModule { }

app.component.ts

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

@Component({
    selector: 'app',
    styleUrls: ['./app.component.scss'],
    template: '<router-outlet></router-outlet>'
})
export class AppComponent { }

app.transitions.ts

import {
    trigger, style, transition, animate, query, stagger, keyframes
} from '@angular/animations';

export const fadeIn = trigger('fadeIn', [
    transition('* <=> *', [
        query(':enter', [
            style({ opacity: 0 }),
            animate('1s', style({ opacity: 1 }))
        ], { optional: true }),
    ]),
]);

enter.component.ts

import { Component } from '@angular/core';
import { fadeIn } from '@app/app.transitions';

@Component({
    selector: 'entrar',
    styleUrls: ['./entrar.component.scss'],
    templateUrl: './entrar.component.html',
    animations: [fadeIn],
    host: { '[@fadeIn]': '' }
})
export class EntrarComponent { }

registrar.component.ts

import { Component } from '@angular/core';
import { fadeIn } from '@app/app.transitions';

@Component({
    selector: 'registrar',
    styleUrls: ['./registrar.component.scss'],
    templateUrl: './registrar.component.html',
    animations: [fadeIn],
    host: { '[@fadeIn]': '' }
})
export class RegistrarComponent { }

Theoretically, the above code should mean that when there is any transition between the 2 routes, the outbound and inbound route should disappear and appear with a 1-second animation but it does not.

A little help there?

angular

asked by anonymous 31.03.2018 / 06:54

1 answer

Request with Checkbox + inputys [duplicate] Code Repeat

score 1 · Accepted Answer

Opa takes a look at this tutorial

app.component.ts

import { Component } from '@angular/core';
import { fadeIn } from '@app/app.transitions';

@Component({
    selector: 'app',
    styleUrls: ['./app.component.scss'],
    template: '<main [@fadeIn]="getState(o)">
                 <router-outlet #o="outlet"></router-outlet>
               </main>',
    animations: [fadeIn]
})
export class AppComponent {
  getState(outlet) {
    return this.routingService.getDirectionAnimation(outlet);
  }
 }