सीएसएस का ऐनिमेशन वाला ग्रिड लेआउट

Bramus

सीएसएस ग्रिड में, grid-template-columns और grid-template-rows प्रॉपर्टी की मदद से, लाइन के नाम तय किए जा सकते हैं. साथ ही, ग्रिड कॉलम और लाइनों के साइज़ को ट्रैक किया जा सकता है. इन प्रॉपर्टी के लिए इंटरपोलेशन की सुविधा का इस्तेमाल करने पर, ग्रिड लेआउट किसी ऐनिमेशन या ट्रांज़िशन के आधे हिस्से पर स्नैप करने के बजाय, स्टेटस के बीच आसानी से ट्रांज़िशन कर पाते हैं.

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • सफ़ारी: 16.

सीएसएस में वैल्यू इंटरपोलेशन

सीएसएस में, transition प्रॉपर्टी का इस्तेमाल करके, प्रॉपर्टी को एक वैल्यू से दूसरी वैल्यू में आसानी से बदला जा सकता है.

#target {
  opacity: 0.5;
  transition: opacity ease-in-out 0.25s;
}

#target:hover {
  opacity: 1;
}

रेंडरिंग इंजन, टारगेट की गई प्रॉपर्टी की वैल्यू के टाइप का अपने-आप पता लगा लेगा. साथ ही, नई वैल्यू पर आसानी से ट्रांज़िशन करने के लिए, उस जानकारी का इस्तेमाल करेगा.

उदाहरण के लिए:

  • क्या opacity को 0 से 1 पर ले जाना है? यह अंकों वाला इंटरपोलेशन है.
  • क्या background-color को white से black पर ट्रांसफ़र किया जा रहा है? सोर्स और टारगेट कलर के बीच फ़ेड करें.
  • क्या width को ट्रांज़िशन किया जा रहा है? अंकों के हिसाब से इंटरपोलेट करें और ज़रूरत पड़ने पर इकाइयों को कन्वर्ट करें.

यही बात सीएसएस ऐनिमेशन पर भी लागू होती है. यहां ब्राउज़र, कीफ़्रेम के बीच वैल्यू इंटरपोलेशन करेगा.

grid-template-columns और grid-template-rows को ऐनिमेट करना

ग्रिड लेआउट, ऐनिमेशन या ट्रांज़िशन के आधे हिस्से पर स्नैप करने के बजाय, एक से दूसरे स्टेटस में आसानी से ट्रांज़िशन कर सकते हैं.

नीचे दिए गए डेमो में, एक ग्रिड में कई अवतार दिखाए गए हैं. जगह बचाने के लिए, grid-template-columns का इस्तेमाल करके हर कॉलम की चौड़ाई को सीमित करके, अवतार एक-दूसरे के ऊपर लगाए जाते हैं. कर्सर घुमाने पर, हर कॉलम को ज़्यादा जगह मिलती है.

.avatars {
  display: grid;
  gap: 0.35em;

  grid-auto-flow: column;
  grid-template-columns: repeat(4, 2em);
  transition: all ease-in-out 0.25s;
}

.avatars:hover {
  grid-template-columns: repeat(4, 4em);
}

transition प्रॉपर्टी की मदद से, ग्रिड वैल्यू के बीच आसानी से इंटरपोल करता है.

यह असर उन ऐनिमेशन पर भी लागू होता है जो grid-template-columns या grid-template-rows वैल्यू बदलते हैं.