कोणीय 2 एनीमेशन - बूलियन ट्रिगर?

Question

मैं एक बुलियन संपत्ति के लिए एक संक्रमण को ट्रिगर करने की कोशिश कर रहा हूं, लेकिन यह आग लगती नहीं है।

यहाँ मेरी एनीमेशन ट्रिगर की कटौती संस्करण है

trigger(
    'trueFalseAnimation', [ 
    transition('* => true', [ 
     style({backgroundColor: '#00f7ad'}), 
     animate('2500ms', style({backgroundColor: '#fff'})) 
    ]), 
    transition('* => false', [ 
     style({backgroundColor: '#ff0000'}), 
     animate('2500ms', style({backgroundColor: '#fff'})) 
    ]) 
    ] 
) 

HTML:

<div [@trueFalseAnimation]="model.someProperty">Content here</div> 

परीक्षण करने के लिए:

ngOnInit() { 

    setTimeout(() => { 
     this.model.someProperty = true; 
     setTimeOut(() => { 
      this.model.someProperty = false; 
     }, 5000);  
    }, 1000) 
} 

ट्रिगर कभी नहीं होता है जब someProperty बदल जाता है।

एक त्वरित परीक्षण के रूप में मैं एक स्ट्रिंग का उपयोग करने के लिए ट्रिगर बदल गया और यह

trigger(
     'trueFalseAnimation', [ 
     transition('* => Success', [ 
      style({backgroundColor: '#00f7ad'}), 
      animate('2500ms', style({backgroundColor: '#fff'})) 
     ]), 
     transition('* => Failed', [ 
      style({backgroundColor: '#ff0000'}), 
      animate('2500ms', style({backgroundColor: '#fff'})) 
     ]) 
     ] 
    ) 

काम करता है परीक्षण करने के लिए:

ngOnInit() { 

    setTimeout(() => { 
     this.model.someProperty = "Success"; 
     setTimeOut(() => { 
      this.model.someProperty = "Failed"; 
     }, 5000);  
    }, 1000) 
} 

दूसरे उदाहरण सिर्फ ठीक काम करता है

मेरे सवालों का

हैं

1. बूलियन हैं ट्रिगर के रूप में समर्थित है?
2. यदि हां # 1 मैं गलत कर रहा हूं?

Answer 1

1. ऐसा नहीं लगता है। मैंने देखा कि इसके लिए एक मुद्दा (12337) पहले ही उठाया गया है, लेकिन अब तक कोई अपडेट नहीं हुआ है।
2. एक अन्य विकल्प सही और गलत के बजाय 1 और 0 का उपयोग करना है।

से plunker देखें।

trigger('isVisibleChanged', [ 
     state('true' , style({ opacity: 1, transform: 'scale(1.0)' })), 
     state('false', style({ opacity: 0, transform: 'scale(0.0)' })), 
     transition('1 => 0', animate('300ms')), 
     transition('0 => 1', animate('900ms')) 
]) 

Answer 2

मुझे एक ही समस्या है। सुनिश्चित नहीं है कि बूलियन ट्रिगर्स के रूप में समर्थित हैं, लेकिन मुझे जो कामकाज मिला वह स्ट्रिंग प्रॉपर्टी को स्ट्रिंग के रूप में बूलियन मान को वापस करने के लिए गेटटर के साथ परिभाषित करना था। कुछ इस तरह:

get somePropertyStr():string { 
    return this.someProperty.toString(); 
} 

तो फिर तुम कि somePropertyStr संपत्ति के लिए अपने एनीमेशन के लिए बाध्य करना चाहिए।

एक बार फिर, यह एक बदसूरत कामकाज है, सबसे अच्छी बात बुलियन मूल्य का उपयोग करने में सक्षम होगी।