Auto-Animate తన మొదటి అధికారిక Marko 6 అడాప్టర్‌ను విడుదల చేసింది, ఇది డెవలపర్లు అదనపు JavaScript లేకుండా కేవలం ఒకే ఒక్క ట్యాగ్‌తో లిస్ట్ మార్పులను యానిమేట్ చేయడానికి అనుమతిస్తుంది. Marko ప్రాజెక్ట్‌లలో మోషన్ (motion) అనేది ఒక ప్రత్యేకమైన శ్రమగా మారేలా చేసే బోయిలర్‌ప్లేట్ (boiler-plate) కోడ్‌ను ఇది తొలగించడం వల్ల ఈ అడుగు చాలా కీలకం.

Marko యొక్క రెండరింగ్ మోడల్ React లేదా Vue వంటి ఫ్రేమ్‌వర్క్‌లు ఆధారపడే క్లయింట్-సైడ్ “hydration” దశను దాటవేస్తుంది. సర్వర్ HTMLని పంపిన తర్వాత, Marko ఆ మార్కప్‌ను అక్కడే కొనసాగిస్తుంది, దీనివల్ల బండిల్ పరిమాణం చాలా తక్కువగా ఉంటుంది—రన్‌టైమ్ కోసం గజిప్డ్ (gzipped) రూపంలో సుమారు 7 KB మాత్రమే. అయితే, ఇదే షార్ట్‌కట్ వల్ల చాలా యానిమేషన్ లైబ్రరీలకు ఇబ్బంది కలుగుతుంది, ఎందుకంటే అవి ఎఫెక్ట్‌లను జోడించడానికి ముందు క్లయింట్-సైడ్ రెండరింగ్ కోసం వేచి చూడాల్సి ఉంటుంది. ఇప్పటికే ఉన్న DOM లోకి హుక్ (hook) లేకపోవడం వల్ల, డెవలపర్లు సాంప్రదాయకంగా ప్రతి లిస్ట్ అప్‌డేట్ కోసం కస్టమ్ కోడ్‌ను వ్రాయాల్సి వచ్చేది.

కొత్త అడాప్టర్ Marko యొక్క onMount లైఫ్‌సైకిల్‌లోకి హుక్ అవ్వడం ద్వారా ఆ పరిమితిని అధిగమిస్తుంది. ఒక కాంపోనెంట్ మౌంట్ అయినప్పుడు, అడాప్టర్ లిస్ట్ యొక్క పేరెంట్ నోడ్ (parent node) లో వచ్చే మార్పులను గమనించడానికి ఒక MutationObserverను సృష్టిస్తుంది. ఐటమ్స్ పుష్ చేయబడినప్పుడు, ఫిల్టర్ చేయబడినప్పుడు లేదా షఫుల్ చేయబడినప్పుడు, ఈ అబ్జర్వర్ auto-animate యొక్క అంతర్నిర్మిత ట్రాన్సిషన్ ఇంజిన్‌ను ట్రిగ్గర్ చేస్తుంది, తద్వారా ఎంట్రీ, ఎగ్జిట్ మరియు రీఆర్డర్ యానిమేషన్‌లను ఆటోమేటిక్‌గా అందిస్తుంది. ఇవన్నీ కేవలం ఒకే ఒక్క <auto-animate> ట్యాగ్ వెనుక జరుగుతాయి.

ఈ ట్యాగ్ మూడు ఆట్రిబ్యూట్‌లను స్వీకరిస్తుంది:

  • parent – లిస్ట్ కంటైనర్‌ను సూచించే ఒక Marko ట్యాగ్ వేరియబుల్.
  • options – డ్యూరేషన్, ఈసింగ్ మరియు ఇతర టైమింగ్ సెట్టింగ్‌ల కోసం ఒక ఆబ్జెక్ట్.
  • enabled – రన్‌టైమ్‌లో యానిమేషన్‌లను ఆన్ లేదా ఆఫ్ చేయగల రియాక్టివ్ బూలియన్.

enabled అనేది రియాక్టివ్‌గా ఉండటం వల్ల, డెవలపర్లు DOMను తాకకుండా లేదా హ్యాండ్లర్‌లను తిరిగి వ్రాయకుండానే దీనిని ఏదైనా స్టేట్ వాల్యూకి బైండ్ చేసి మోషన్‌ను టోగుల్ చేయవచ్చు. అందువల్ల, ఈ అడాప్టర్ మిగిలిన కాంపోనెంట్ ట్రీకి కనిపించకుండానే, ఒక స్టాటిక్ డైరెక్టివ్ కంటే ఎక్కువ ఫ్లెక్సిబిలిటీని అందిస్తుంది.

Vite ఉపయోగించే టీమ్‌ల కోసం, ఈ ప్యాకేజీ “unresolved import” వార్నింగ్‌ను కలిగించవచ్చు. vite.config.tsలో ఈ క్రింది కోడ్‌ను జోడించడం ద్వారా ఈ సమస్యను పరిష్కరించవచ్చు:

optimizeDeps: {
  exclude: ["@formkit/auto-animate"]
}

ఇది Viteని, ఇంపోర్ట్‌ను ప్రీ-బండిల్ చేయడానికి ప్రయత్నించే బదులు, Marko ప్లగిన్‌ను హ్యాండిల్ చేయనిస్తుంది.

దీని వల్ల కలిగే ప్రయోజనం తక్షణమే కనిపిస్తుంది. గతంలో useEffect హుక్, మాన్యువల్ క్లాస్ టోగుల్స్ మరియు కొన్ని లైన్ల యానిమేషన్ కోడ్ అవసరమైన సాధారణ Marko లిస్ట్‌ను ఇప్పుడు ఈ విధంగా వ్రాయవచ్చు:

<auto-animate parent=items enabled=showAnimations options={duration: 300}>
  <ul>
    $ for|item| of=items
      <li>${item.name}</li>
    $ end
  </ul>
</auto-animate>

అదనపు JavaScript లేదు, అదనపు బండిల్ బరువు లేదు, మరియు auto-animate ఇతర ఫ్రేమ్‌వర్క్‌ల కోసం అందించే అదే స్మూత్ మోషన్ ఇక్కడ కూడా లభిస్తుంది.

ఎవరు లాభపడతారు, ఎవరు గమనిస్తారు

ఇప్పటికే Markoను స్వీకరించిన ఫ్రంట్-ఎండ్ టీమ్‌లకు, డైనమిక్ లిస్ట్‌ల వంటి తరచుగా ఉపయోగించే UI ప్యాటర్న్‌ల కోసం ఒక రెడీమేడ్ పరిష్కారం లభిస్తుంది. ఈ అడాప్టర్ యొక్క లైట్‌వెయిట్ స్వభావం, పర్ఫార్మెన్స్-క్రిటికల్ సైట్‌లకు చాలా ముఖ్యమైనది అయిన చిన్న బండిల్ పరిమాణాన్ని కాపాడుతుంది. మరోవైపు, ఈ అడాప్టర్ ప్రస్తుతం లిస్ట్ మ్యుటేషన్లపై దృష్టి పెడుతుంది; ప్రత్యేకమైన టైమ్‌లైన్ కంట్రోల్ లేదా సంక్లిష్టమైన కొరియోగ్రఫీ అవసరమయ్యే డెవలపర్లు ఇప్పటికీ కస్టమ్ కోడ్ లేదా మరొక లైబ్రరీపై ఆధారపడాల్సి ఉంటుంది.

తదుపరి ఏమి చూడాలి

ఈ అడాప్టర్ ఓపెన్-సోర్స్ మరియు రిలీజ్ నోట్స్‌లో ఇప్పటికే డెమో సాండ్‌బాక్స్ లింక్ చేయబడింది. కమ్యూనిటీ ఫీడ్‌బ్యాక్ బహుశా గ్రిడ్ రీఫ్లోస్ కోసం సపోర్ట్ లేదా Marko యొక్క రాబోయే కాంపోనెంట్-లెవల్ ట్రాన్సిషన్స్‌తో ఇంటిగ్రేషన్ వంటి భవిష్యత్తు విస్తరణలను రూపొందిస్తుంది. ఒకవేళ దీని అడాప్షన్ రేటు React మరియు Vueలో auto-animate యొక్క వేగవంతమైన పెరుగుదలను పోలి ఉంటే, మనం JavaScript UI ఎకోసిస్టమ్ అంతటా “zero-code” మోషన్ కోసం ఒక విస్తృతమైన ప్రయత్నాన్ని చూడవచ్చు.

ముఖ్య అంశం: Auto-Animate యొక్క Marko 6 అడాప్టర్, సర్వర్-రెండర్ చేయబడిన లిస్ట్‌లను యానిమేట్ చేయడం వంటి చారిత్రాత్మకంగా కష్టతరమైన పనిని ఒకే ఒక్క డిక్లరేటివ్ ట్యాగ్‌గా మారుస్తుంది, తద్వారా Marko యొక్క కనిష్ట బండిల్ పరిమాణాన్ని కాపాడుతూనే డెవలపర్‌లకు తక్షణమే టోగుల్ చేయగల మోషన్ లేయర్‌ను అందిస్తుంది.