Tengo un componente Angular 2 que muestra un encabezado. Hay un servicio que escucha los cambios de datos de otros componentes y puede cambiar el valor de cadena del encabezado.
Quiero usar animaciones angulares para desvanecerse en el texto cuando se carga y luego disolver/fundir cuando cambia el texto del título. Tengo el fundido funcionando, pero no estoy seguro de cómo activar el fundido cruzado y si se usaría la misma transición.
Aquí está el código hasta ahora:
import { Component, OnInit, Input, style, transition, animate, trigger } from '@angular/core'; import { DataTransferService } from '../services/data-transfer.service'; @Component({ selector: 'app-page-header', template: '<h1 [innerHTML]="heading" [@fadeMe]="heading" *ngIf="heading != null"></h1>', animations: [ trigger('fadeMe', [ transition('void => *', [style({opacity: 0}), animate('500ms ease-in', style({opacity: 1}))]) ]) ] }) export class PageHeaderComponent implements OnInit { public heading: string = ''; constructor( private pageHeaderService: DataTransferService ) { } ngOnInit() { this.pageHeaderService.pageHeaderData$.subscribe( data => { this.heading = data['heading']; }); } }Cualquier ayuda muy apreciada.
Aunque esto tiene 6 meses, me topé con esto ayer.
Aquí hay una solución rápida para esto:
Si lo piensas bien, te darás cuenta de que para poder hacer crossfade debes tener a mano tanto títulos anteriores como actuales . Entonces, lo que queda ahora es ocultar y mostrar ambos indistintamente.
<!-- class title sets both to the same absolute location --> <h1 class="title" [@crossfade]="state1">{{title1}}</h1> <h1 class="title" [@crossfade]="state2">{{title2}}</h1> animations: [ trigger('crossfade', [ state('show', style({ opacity: 1 })), state('hide', style({ opacity: 0 })), transition('* => show', animate('1s ease-in')), transition('show => hide', animate('1s ease-out')) ])] ... title1: string; title2: string; state1 = 'hide'; state2 = 'hide'; switchTitles() { const newTitle = ... //get new title if (this.state1 === 'show') { this.title2 = newTitle; this.state1 = 'hide'; this.state2 = 'show'; } else { this.title1 = newTitle; this.state2 = 'hide'; this.state1 = 'show'; } }