2017-11-15 13 views
2

In Angular 5 wurde eine Animation erstellt, wenn ein Element aus der Liste hinzugefügt oder entfernt wird.Animationsliste in Angular 5

Beim Hinzufügen eines Elements erscheint es von oben, wird langsam eingeblendet und in die Liste eingefügt. Wenn ein Objekt entfernt wird, wird das Objekt langsam nach oben verschoben und verschwindet. Das Problem, das ich zu lösen versuche, ist, wenn ein Gegenstand entfernt wird, wird es schön langsam und verschwindet und dann verschwinden die restlichen Gegenstände in der Liste, schnappt einfach. Ich brauche die restlichen Gegenstände, um sich zu bewegen, anstatt zu schnappen. Wie kann ich das machen?

Hier ist mein Code:

app.component.ts

import { Component } from '@angular/core'; 
import { trigger, state, style, transition, animate, group } from '@angular/animations' 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    animations: [ 
    trigger('itemAnim', [ 
     transition(':enter', [ 
    style({ transform: 'translateY(-20%)' }), 
    animate(500) 
    ]), 
    transition(':leave', [ 
    group([ 
      animate('0.1s ease', style({ transform: 'translateY(-20%)' })), 
      animate('0.5s 0.2s ease', style({ opacity: 0 })) 
     ]) 
     ]) 
    ]) 
    ] 
}) 
export class AppComponent { 
    title = 'Item'; 
    items:string[]=[]; 
    i=0; 
    addItem(){ 
    this.items.push(this.title+this.i++); 
    } 
    removeItem(){ 
    this.items.shift(); 
    } 
} 

app.component.html

<button (click)="addItem()">Add</button> 
<button (click)="removeItem()">Remove</button> 
<br/> 
<ul> 
    <li [@itemAnim]="items.length" *ngFor="let item of items"> 
    {{item}} 
    </li> 
</ul> 

Hier ist der Arbeits Plunker ist Click here

Antwort

1

Sie können die Höhe des <li> Element verwenden, so, wenn Sie es 0px ändern, um sie verschwinden zu lassen, es bewegt sich etwas glatt die Elemente, die unter sind:

transition(':leave', [ 
    group([ 
     animate('0.5s ease', style({ transform: 'translateY(-20%)', 'height':'0px' })), 
     animate('0.5s 0.2s ease', style({ opacity: 0 })) 
    ]) 
]) 

I auch die Übergangsdauer von 0.1s zu 0.5s erhöht, um es offensichtlicher zu machen.

+0

Dank @Brice, es funktioniert. –

+0

Bitte werfen Sie einen Blick auf die Plunkr, ich habe Bootstrap Stile hinzugefügt und es bricht Ihre Lösung. –

+0

Dies liegt daran, dass die Bootstrap-Klasse dem Element eine Auffüllung hinzugefügt hat (10px 15px 10px 15px). Eine Lösung wäre also, das Padding auch in deinem Übergang zu ändern: ** transform: 'translateY (-20%)', 'height': '0px', 'padding': '0px 15px 0px 15px'} ** oder * * transform: 'translateY (-20%)', 'Höhe': '0px', 'padding': '0px'} ** –