Error creating an animation between routes using Angular 5

Asked

Viewed 166 times

1

I’m making an application that uses the most current structure of Angular (v5). I had already made the implementation of BrowserAnimationsModule in previous versions and I had no problems but unfortunately I am not able to create this animation. My code is following:

app.modulets.

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.componentts.

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.componentts.

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 { }

register.componentts.

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 make sure that when there is any transition between the 2 routes, the exit and input route should disappear and appear with a 1-second animation but does not occur.

A little help there?

angular

1 answer

2


Opa take a look at this tutorial

app.componentts.

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);
  }
 }

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.