Estoy tratando de implementar animaciones de ruta en un proyecto CLI angular usando Angular/4. He estado tratando de seguir este tutorial, pero con un éxito limitado.
mi codigo lee
/src/app/_animations/fadein.animation.ts
import { trigger, state, animate, transition, style } from '@angular/animations'; export const fadeInAnimation = // trigger name for attaching this animation to an element using the [@triggerName] syntax trigger('fadeInAnimation', [ // route 'enter' transition transition(':enter', [ // css styles at start of transition style({ opacity: 0 }), // animation and styles at end of transition animate('3000ms', style({ opacity: 1 })) ]), ]);/src/app/dashboard/dashboard.component.ts
import { Component, OnInit } from '@angular/core'; import { SlimLoadingBarService } from 'ng2-slim-loading-bar'; // import fade in animation import { fadeInAnimation } from './../_animations/fadein.animation'; import { PickJob } from './../pick-jobs/pick-job'; import { PickJobService } from './../pick-jobs/pick-job.service'; import { FlashService } from './../flash/flash.service'; @Component({ templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.css'], animations: [fadeInAnimation], host: { '[@fadeInAnimation]': '' } }) export class DashboardComponent {}/src/app/dashboard/dashboard.component.html
<div class="container_flex"> <div class="row"> <div class="col-md-12"> <div class="btn btn-block btn-primary block shadow"> Print Next Pick Job </div> <a class="btn btn-block btn-danger shadow" routerLink="/pick-jobs" routerLinkActive="menu-active"> List Pick Jobs </a> <a class="btn btn-block btn-warning shadow" routerLink="/cages/assign" routerLinkActive="menu-active"> Print Pick Cage Labels </a> </div> </div> </div>/src/app/app.module.ts
... import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; ... @NgModule({ imports: [ ... BrowserAnimationsModule, ...La animación nunca se ejecuta más, se ha completado antes de cargar la página. No estoy seguro de cuál. ¿Alguien puede detectar el error en mi código? Cualquier consejo es muy apreciado
Puede lograr un efecto de desvanecimiento/aparición suave ahora usando animaciones de ruta.
Defina su animación y enrute las transiciones a las que se aplica:
const fadeIn = [ query(':leave', style({ position: 'absolute', left: 0, right: 0, opacity: 1 })), query(':enter', style({ position: 'absolute', left: 0, right: 0, opacity: 0 })), query(':leave', animate('1s', style({ opacity: 0 }))), query(':enter', animate('1s', style({ opacity: 1 }))) ] @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], /* Allow CSS in this component to cascade down to child components */ encapsulation: ViewEncapsulation.None, animations: [ trigger('routerAnimations', [ transition('* => *', fadeIn) ]) ] })Anote la salida de su enrutador en su plantilla:
<div class="page" [@routerAnimations]="prepareRouteTransition(outlet)"> <router-outlet #outlet="outlet"></router-outlet> </div> De vuelta en su app.component.ts implemente la prepareRouteTransition(outlet) :
prepareRouteTransition(outlet) { const animation = outlet.activatedRouteData['animation'] || {}; return animation['value'] || null; }Si desea animaciones personalizadas según la ruta de ida y vuelta, debe agregar algunos metadatos a sus rutas. Consulte la charla de Matias Niemela en ng-conf 2017 aquí para obtener más información, pero su proyecto de demostración contiene un ejemplo de trabajo.
Sí, este es fácil y un poco sutil al principio.
No use la propiedad del componente host . Eso no te está haciendo nada.
En cambio, lo que desea hacer es agregar la propiedad sintética @yourTrigger al elemento "anfitrión" del componente que desea animar. Si ese componente tiene un selector que está escrito en una plantilla como <app-dashboard> , entonces lo que intenta hacer es agregar un "atributo": <app-dashboard @yourTrigger>
Puede hacer esto en el propio componente con @HostBinding :
@Component({ templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.css'], animations: [routeAnimation], }) export class DashboardComponent { @HostBinding('@routeAnimation') routeAnimation = true; } @HostBinding establece un enlace en el elemento host del componente. Este es el mismo elemento al que se dirige con :host en el CSS de su plantilla.
Tenga en cuenta que necesita tanto la propiedad de animations en el componente como el decorador @HostBinding . El valor de HostBinding debe ser el activador que está utilizando en la animación a la que se hace referencia en fadeInAnimation . Los tutoriales siempre llaman a este disparador routeAnimation y no estoy seguro de cuán especial es, pero probablemente sea una buena práctica.