Sveltejs Academy · पाठ

सूची का क्रम बदलने के लिए animate:flip

FLIP तकनीक का उपयोग करके क्रम बदलने पर सूची आइटम को सहजता से एनिमेट करें।

पाठ 1, कुल 4 में से13 चरण

सूची का क्रम बदलने के लिए animate:flip, CoddyKit पर Sveltejs Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Sveltejs Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

animate:flip क्या करता है

जब कीयुक्त each ब्लॉक में एलिमेंट की स्थिति बदलती है, तो flip उन्हें सुचारु रूप से ऐनिमेट करता है।

आयात

svelte/animate से।

import { flip } from "svelte/animate";

आइटम पर लागू करना

कीयुक्त each के अंदर मौजूद आइटम पर जोड़ें।

{#each items as item (item.id)}
  <li animate:flip>{item.name}</li>
{/each}

FLIP तकनीक

FLIP का अर्थ First, Last, Invert, Play है। Svelte अंतर की गणना करता है और ट्रांसफ़ॉर्म का उपयोग करके सुचारु रूप से ऐनिमेट करता है।

कीयुक्त Each आवश्यक

ऐनिमेशन यह जानने के लिए कुंजियों पर निर्भर करता है कि कौन-से DOM नोड किस आइटम से संबंधित हैं।

पैरामीटर

ट्रांज़िशन की तरह { duration, delay, easing } विकल्प पास करें।

<li animate:flip={{ duration: 300 }}>

सामान्य ट्रिगर

खींचकर छोड़ने, क्रमबद्ध करने, फ़िल्टर करने या फेरबदल करने से क्रम बदलना।

ट्रांज़िशन के साथ संयोजन

क्रम बदलने वाले ऐनिमेशन के साथ transition: जोड़कर प्रवेश और निकास ऐनिमेशन लागू करें।

प्रदर्शन

CSS ट्रांसफ़ॉर्म का उपयोग होता है; सैकड़ों आइटम के लिए भी यह सहज रहता है।

सीमाएँ

अलग-अलग each ब्लॉकों के बीच कंटेनर बदलने वाले मूवमेंट को ऐनिमेट नहीं किया जा सकता।

कम किया गया मोशन

सुगम्यता के लिए, जब उपयोगकर्ता कम मोशन पसंद करता हो, तब ऐनिमेशन छोड़ दें।

त्वरित जाँच

animate:flip के लिए क्या आवश्यक है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावृत्ति

animate:flip, FLIP तकनीक का उपयोग करके key युक्त each ब्लॉकों के अंदर सूची के क्रम-परिवर्तन को सहजता से ऐनिमेट करता है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 41
पाठ: 163

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “सूची का क्रम बदलने के लिए animate:flip” पाठ निःशुल्क है?

हाँ—“सूची का क्रम बदलने के लिए animate:flip” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Sveltejs Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“सूची का क्रम बदलने के लिए animate:flip” में मैं क्या सीखूँगा?

FLIP तकनीक का उपयोग करके क्रम बदलने पर सूची आइटम को सहजता से एनिमेट करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Sveltejs Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Sveltejs Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Sveltejs Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“सूची का क्रम बदलने के लिए animate:flip” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Sveltejs Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Sveltejs Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Sveltejs Academy पर वापस जाएँ