कोणीय 2 * ngFor तत्वों को धक्का देने के लिए एनीमेशन

Question

मैंने प्रवेश करने या छोड़ने वाले तत्वों (नीचे दी गई छवि पर "नया तत्व") के लिए कई एनीमेशन ट्यूटोरियल देखे हैं, लेकिन शेष तत्व (तत्व 1 और 2), जिन्हें धक्का दिया जाता है आमतौर पर बस अपने नए स्थान पर teleport।

वहाँ, दूर अच्छी तरह से स्थानांतरित करने के लिए अनुलग्न चित्र में दिखाया गया है जैसे अन्य तत्वों चेतन करने के लिए एक तरीका है?

Answer 1

आप इसे प्राप्त करने के लिए कोणीय 2 animation API का उपयोग कर सकते हैं।

Plunker Example

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div class="container"> 
     <div *ngFor="let item of items; let i = index" class="item" (click)="remove(i)" 
     [@anim]="item.state"> 
     {{ item.name }} 
     </div> 
    </div> 
    <div class="aside"> 
     <button (click)="push()">Push</button> 
    </div> 
    `, 
    animations: [ 
    trigger('anim', [ 
     transition('* => void', [ 
      style({ height: '*', opacity: '1', transform: 'translateX(0)', 'box-shadow': '0 1px 4px 0 rgba(0, 0, 0, 0.3)'}), 
      sequence([ 
      animate(".25s ease", style({ height: '*', opacity: '.2', transform: 'translateX(20px)', 'box-shadow': 'none' })), 
      animate(".1s ease", style({ height: '0', opacity: 0, transform: 'translateX(20px)', 'box-shadow': 'none' })) 
      ]) 
     ]), 
     transition('void => active', [ 
      style({ height: '0', opacity: '0', transform: 'translateX(20px)', 'box-shadow': 'none' }), 
      sequence([ 
      animate(".1s ease", style({ height: '*', opacity: '.2', transform: 'translateX(20px)', 'box-shadow': 'none' })), 
      animate(".35s ease", style({ height: '*', opacity: 1, transform: 'translateX(0)', 'box-shadow': '0 1px 4px 0 rgba(0, 0, 0, 0.3)' })) 
      ]) 
     ]) 
    ]) 
    ] 
}) 
export class AppComponent { 
    items: any[] = [ 
    { name: 'Element 1' }, 
    { name: 'Element 2' } 
    ]; 

    push() { 
    this.items.splice(1, 0, { name: 'New element', state: 'active' }); 
    } 

    remove(index) { 
    this.items.splice(index, 1); 
    } 
} 

आयात करने के लिए BrowserAnimationsModule