छुट्टी और अवलोकन फिल्टर पर कोणीय 2 रन एनीमेशन

Question

मेरे पास एक घटक है जिसे मैं इस तरह के प्रवेश पर एनिमेट कर सकता हूं, एंट्री एनीमेशन ठीक काम करता है। हैंडल रिमूवल विधि निष्पादित हो जाती है और एक इवेंट एमिटर घटकों की सूची (अवलोकनों का उपयोग करके) घटक को फ़िल्टर करता है। लेकिन: छुट्टी एनीमेशन नहीं चलता है:

@Component({ 
     animations: [ 
      trigger(
      'enterAnimation', [ 
       transition(':enter', [ 
       style({transform: 'translateY(100%)', opacity: 0}), 
       animate('500ms', style({transform: 'translateY(0)', opacity: 1})) 
       ]), 
       transition(':leave', [ 
       style({transform: 'translateY(0)', opacity: 1}), 
       animate('500ms', style({transform: 'translateY(100%)', opacity: 0})) 
       ]) 
      ] 
      ) 
     ], 
     template: ` 
      <div class="mb1 card text-xs-center rounded" [@enterAnimation]="show"> 

...

export class ContentPropertyComponent { 

    show: boolean = false; 

    constructor(private router: Router) { 
     this.show = true; 
    } 

    handleRemoval(contentProperty: PropertyModel) { 
     this.show = false; 
     this.delete.emit(this.contentProperty); 
    } 
} 

किसी भी मदद की सराहना की।

Answer 1

कोणीय इसलिए यदि आप किसी पुराने संस्करण का उपयोग कर रहे है (जैसा कि मुझे लगता है), तो आप void => * और * => void संक्रमण परिभाषाओं का उपयोग करना चाहिए, संस्करण 2.1.0 में :enter और :leave शॉर्टकट की शुरुआत की। या, वैकल्पिक रूप से, अपने कोणीय वितरण को 2.1.0+ पर अपग्रेड करें।

अपने कोड बदलने तदनुसार कोणीय 2.0+

animations: [ 
    trigger("enterAnimation", [ 
     transition('void => *', [ 
      style({transform: 'translateY(100%)', opacity: 0}), 
      animate('500ms', style({transform: 'translateY(0)', opacity: 1})) 
     ]), 
     transition('* => void', [ 
      style({transform: 'translateY(0)', opacity: 1}), 
      animate('500ms', style({transform: 'translateY(100%)', opacity: 0})) 
     ]) 
    ]) 
    ] 

Plunker में काम करता है: https://plnkr.co/edit/xW38PWgD3SQyhRv09IUW?p=preview