एंगुलर 2

Question

में सशर्त रूप से एनिमेशन जोड़ने के लिए कैसे मेरे पास एक फॉर्म घटक है जिसमें फ़ील्ड हैं, कुछ फ़ील्ड मैं फॉर्म में दिखाई देने पर एनिमेट करना चाहता हूं, लेकिन हर फ़ील्ड नहीं।

<div *ngFor="let field of form.Fields"> 
    <div [ngSwitch]="field.Type" [@slideOut]> 
     <!-- more field stuff --> 
    </div> 
</div> 

अन्य विशेषताओं मैं इस [attr.required]="field.Required" की तरह कुछ कर सकते हैं लेकिन [attr.@slideOut] काम करने के लिए प्रतीत नहीं होता है के साथ

।

आदर्श रूप में मैं अपने मैदान पर एक एनीमेशन संपत्ति के लिए तो मैं इस [@field.Animation] तरह एनिमेशन पास कर सकता है चाहते हैं, लेकिन मैं कैसे मैं इस तरह कुछ भी कर पर किसी भी प्रलेखन नहीं मिल रहा। कोई विचार?

Answer 1

मैं एक समान समस्या के खिलाफ आया हूं और पाया कि आपको थोड़ा अलग दृष्टिकोण लेने की आवश्यकता है।

कोणीय में, एनिमेशन राज्य से जुड़े होते हैं। तो अपने एचटीएमएल में अपनी एनीमेशन के लिए एक अलग ट्रिगर को परिभाषित करने के बजाय, आप कई राज्यों को परिभाषित करना चाहते हैं कि आपका ट्रिगर आपके घटक वर्ग में देख सकता है। और सीधे किसी विधि से एनिमेशन को ट्रिगर करने के बजाय, आप ऑब्जेक्ट की स्थिति को एनीमेशन से जोड़ते हैं।

तो उदाहरण के लिए मैं आवश्यक मॉड्यूल आयात करने के बाद घटक सजावट में निम्नलिखित परिभाषित कर सकता हूं।

@Component({ 
    selector: 'app-some-animated', 
    templateUrl: './some.component.html', 
    styleUrls: ['./some-animated.component.scss'], 
    animations: [ 
    trigger('flyInOut', [ 
     transition("void => fly", [ 
     animate(300, keyframes([ 
      style({transform: 'translateX(100%)', opacity: 0}), 
      style({transform: 'translateX(0)', opacity: 1}) 
     ])) 
     ] 
    ) 
    ]), 
    trigger('flyInOut', [ 
     transition("void => fade", [ 
      animate(300, keyframes([ 
      style({opacity: 0}), 
      style({opacity: 1}) 
      ])) 
     ] 
    ) 
    ]) 
    ] 
}) 

इस उदाहरण मैं एनिमेशन बना रही हूँ में जैसे ही तत्व instantiated है होता है। और ngOnInit() विधि में मैं इसे स्थापित कर रहा हूं। मुझे "फ्लाई" या "फीका" करने के लिए देखें।

एचटीएमएल में मैं बहुत की तरह flyInOut ट्रिगर संलग्न कर रहा हूँ:

<div [@flyInOut]="watchMe"> 
    Some content... 
</div> 

आपके मामले में आप शायद अपने क्षेत्र वस्तुओं के लिए या अपने * ngFor से एक iterable शर्त के रूप में आवश्यक राज्य जोड़ना चाहते हैं।

This article coursetro से एक अच्छा स्पष्टीकरण और एक वीडियो भी है।