Erstellen eines Übergangs beim Ändern von Eigenschaften in Winkel 2/4

Question

Ich möchte einen Übergangseffekt erstellen, wenn ich den Wert einer Eigenschaft ändere.

Ich habe versucht, die folgenden

@Component({ 
    selector: 'image-holder', 
    template: ` 
     <div class="carousel-image"> 
      <img src="{{ image }}" [@slideInRight]="slide" /> 
      <span>{{ text }}</span> 
     </div> 
    `, 
    styleUrls: ['../greenscreen.scss'], 
    animations: [ 
     trigger(
      'slideInRight', 
      [ 
       transition(
       ':enter', [ 
       style({transform: 'translateX(100%)', opacity: 0}), 
       animate('500ms', style({transform: 'translateX(0)', opacity: 1})) 
       ] 
      ), 
      transition(
       ':leave', [ 
       style({transform: 'translateX(0)', 'opacity': 1}), 
       animate('500ms', style({transform: 'translateX(100%)',opacity: 0})) 
       ] 
      ) 
      ]) 
    ] 
}) 
export class ImageHolderComponent implements OnChanges { 
    @Input() 
     image: string; 
    @Input() 
     text: string; 

    public slide: boolean = true; 

    public ngOnChanges(changes: { [propKey: string]: SimpleChange }){ 
     this.slide = !this.slide; 
    } 
} 

Was tue ich angenommen wurde, die Eigenschaft zu ändern würde die Komponente auslösen den Animationseffekt wieder zu starten, aber das als

Answer 1

this.slide = erwartet funktioniert nicht! this.slide wäre wahr und falsch aber wenn ich auf Ihren Auslöser schaue, sagen Sie [@slideInRight] = "Folie"

so im Grunde, wahr oder falsch.

aber wenn ich in Ihren Animationen aussehen sehe ich: eingeben und: verlassen

was, wenn stattdessen hast du ‚true‘ und ‚falsch‘ oder versucht, 1 und 0

dann würden Ihre Animationen arbeiten, wenn slideInRight ist wahr oder falsch und würde die entsprechende Animation für wahr und falsch auslösen.

trigger('work', [ 
    state('*', style({transform: 'translateX(0)', opacity: 1})), 
    state('true', style({'border-right': '50px solid #72BF44', opacity: 1})), 
    state('false', style({'border-right': '20px solid #72BF44', opacity: 1})), 
    transition('1 => 0', animate('.125s .1s cubic-bezier(0.29, 0.06, 0.43, 0.92)')), 
    transition('0 => 1', animate('.125s 0s cubic-bezier(0.29, 0.06, 0.43, 0.92)')), 
    transition('void => *', [ 
    style({transform: 'translateX(-100%)', opacity: 0}), 
    animate('1s 1.1s cubic-bezier(0.29, 0.06, 0.43, 0.92)') 
    ]) 
]) 

Ich habe einen Beispieltrigger eingefügt, den ich in einer Anwendung verwendet habe.

Sie müssen Ihre Zustände für ein und aus/wahr und falsch oder was auch immer variable Werte Sie wollen (String, etc).

dann haben Sie einen Übergang, der von ... wahr zu falsch, oder falsch zu wahr, oder void zu wahr geht, was auch immer Ihr vorheriger Zustand und aktueller Zustand ist, dass der Übergang ausgelöst wird.

Answer 2

Sie können * ngFor für diese Anwendungsfälle verwenden, auch wenn es sich nur um ein einzelnes Objekt handelt.

@Component({ 
    selector: 'image-holder', 
    template: ` 
    <div class="carousel-image"> 
     <img [src]="image" *ngFor="let image of [image]" [@slideInRight]/> 
     <span>{{ text }}</span> 
    </div> 
    `, 
    styleUrls: ['../greenscreen.scss'], 
    animations: [ 
    trigger(
     'slideInRight', 
     [ 
     transition(
      ':enter', [ 
      style({transform: 'translateX(100%)', opacity: 0}), 
      animate('500ms', style({transform: 'translateX(0)', opacity: 1})) 
      ] 
     ), 
     transition(
      ':leave', [ 
      style({transform: 'translateX(0)', 'opacity': 1}), 
      animate('500ms', style({transform: 'translateX(-100%)', opacity: 0})) 
      ] 
     ) 
     ]) 
    ] 
}) 
export class ImageHolderComponent { 
    @Input() 
    image: string; 
    @Input() 
    text: string; 

}