मेरे कोणीय घटक में एक तालिका को लाइन से लाइन प्रदर्शित किया जाएगा, फिर कुछ सेकंड प्रतीक्षा करें, टेबल लाइनों को हटा दें और अगली लाइनें दिखाएं। यह अब तक अच्छा काम करता है।

लेकिन अब मेरे पास एनिमेशन के साथ दो "छोटे" मुद्दे हैं:

  1. यह सुनिश्चित करने के लिए कि पिछला :leave समाप्त हो गया है, मुझे "प्रतीक्षा" (नीचे कोड देखें) डालने की आवश्यकता है। अन्यथा नई लाइनों की छपाई पुरानी लाइनों को हटाने के साथ ओवरलैपिंग कर रही है। समस्या अब यह है कि यह "प्रतीक्षा" पहले ही रन पर भी लागू होता है। मैं कैसे बच सकता हूं कि पहले रन पर "प्रतीक्षा" कहा जाता है? या यह सुनिश्चित करने का कोई और तरीका है कि एक नया एनीमेशन केवल तभी शुरू होता है जब अन्य एनिमेशन किए गए हों (तब मैं उस "प्रतीक्षा" को हटा सकता हूं)?

एक कार्यशील डेमो यहां है https://stackblitz .com/edit/angular-list-animations-gsfhsv?file=app%2Fapp.component.ts

    import { trigger, transition, style, animate, query, stagger, state, keyframes, group } from '@angular/animations';
    
    export const listAnimation = trigger('listAnimation', [
        transition('* => *', [
            // each time the binding value changes
            group([
                query(
                    ':leave',
                    [
                        stagger(100, [
                            animate('500ms', keyframes([style({ filter: 'blur(12px) opacity(0%)' })])),
                        ]),
                    ],
                    { optional: true }
                ),
                query(
                    ':enter',
                    [
                        style({ opacity: 0, height: 0, visibility: 'hidden' }),
                        stagger(100, [
                            animate('0ms 1200ms', style({})), // <--- wait - otherwise flicker and animations are overlapping
                            style({ height: '*', visibility: 'visible' }),
                            animate('500ms', style({ opacity: 1 })),
                        ]),
                    ],
                    { optional: true }
                ),
            ]),
        ]),
    ]);
  1. मैं रनटाइम के दौरान एनीमेशन कैसे बदल सकता हूं? विचार विभिन्न :enter और :leave एनिमेशन का एक समूह बनाना है और उपयोगकर्ता यह चुन सकता है कि कौन सा लागू किया जाएगा। लेकिन मुझे रनटाइम के दौरान एनीमेशन बदलने का कोई तरीका नहीं मिला।
0
Lars 7 जिंदा 2021, 17:41

1 उत्तर

सबसे बढ़िया उत्तर

डेमो

आप एनीमेशन को एक पैरामीटर दे सकते हैं।

आपके मामले में, आपको एनीमेशन के पैरामीटर के रूप में देरी को पारित करने की आवश्यकता है।

देरी की गणना करने के लिए, आपको यह जानना होगा कि कितने तत्व निकल रहे हैं। इसलिए मैं सरणी को खाली करने से ठीक पहले इसे previousLength नामक एक चर में संग्रहीत करूंगा।

this.previousLength = this.datarows.length;

इस प्रकार आप एक पैरामीटर पास करते हैं और एनीमेशन को ऑब्जेक्ट देकर उचित देरी की गणना करते हैं।

[@listAnimation]="{value: datarows.length, params:{delay: previousLength * 100 + 500}}"

फिर आपको अपना नया पैरामीटर लागू करने के लिए एनीमेशन को तदनुसार संशोधित करना होगा।

animate("0ms {{delay}}ms", style({})),
2
Ploppy 8 जिंदा 2021, 17:54