ऊंचाई पर ऐनिमेट करें: स्वचालित; सीएसएस में, (और साइज़ बदलने वाले दूसरे कीवर्ड)

लंबाई से इंट्रिन्सिक साइज़िंग कीवर्ड और फिर से लंबाई पर आसानी से ट्रांज़िशन और ऐनिमेशन करने के लिए, interpolate-size प्रॉपर्टी या calc-size() फ़ंक्शन का इस्तेमाल करें.

Bramus

पब्लिश होने की तारीख: 17 सितंबर, 2024

परिचय

height: auto को ऐनिमेट करने की सुविधा, सीएसएस की वह सुविधा है जिसके लिए अक्सर अनुरोध किया जाता है. उस अनुरोध में थोड़ा बदलाव करके, height के बजाय width प्रॉपर्टी को ट्रांज़िशन किया जा सकता है. इसके अलावा, min-content, max-content, और fit-content जैसे कीवर्ड से दिखाए गए किसी भी अन्य इंटिग्रल साइज़ पर भी ट्रांज़िशन किया जा सकता है.

उदाहरण के लिए, नीचे दिए गए डेमो में, आइकॉन पर कर्सर घुमाने पर लेबल अपनी सामान्य चौड़ाई तक आसानी से ऐनिमेट हो जाएं, तो अच्छा होगा.

इस्तेमाल की गई सीएसएस यहां दी गई है:

nav a {
    width: 80px;
    overflow-x: clip;
    transition: width 0.35s ease; /* 👈 Transition the width */

    &:hover,
    &:focus-visible {
        width: max-content; /* 👈 Doesn't work with transitions */
    }
}

भले ही, width प्रॉपर्टी को ट्रांज़िशन करने के लिए transition का एलान किया गया हो और :hover पर width: auto का एलान किया गया हो, लेकिन कोई भी ट्रांज़िशन आसानी से नहीं होता. इसके बजाय, बदलाव अचानक होता है.

interpolate-size की मदद से, इनट्रिन्सिक साइज़िंग कीवर्ड पर स्विच करना और उनसे स्विच करना

सीएसएस interpolate-size प्रॉपर्टी की मदद से, यह कंट्रोल किया जा सकता है कि सीएसएस में पहले से मौजूद साइज़िंग की सुविधा वाले कीवर्ड के ऐनिमेशन और ट्रांज़िशन की अनुमति होनी चाहिए या नहीं.

इसकी डिफ़ॉल्ट वैल्यू numeric-only है, जो इंटरपोलेशन को चालू नहीं करती. प्रॉपर्टी को allow-keywords पर सेट करने पर, लंबाई से सीएसएस के इंट्रिन्सिक साइज़िंग कीवर्ड में इंटरपोलेशन के लिए ऑप्ट-इन किया जाता है. ऐसा तब किया जाता है, जब ब्राउज़र उन कीवर्ड को ऐनिमेट कर सकता है.

स्पेसिफ़िकेशन के मुताबिक:

• numeric-only: <intrinsic-size-keyword> को इंटरपोल नहीं किया जा सकता.
• allow-keywords: अगर इनमें से एक वैल्यू <intrinsic-size-keyword> और दूसरी <length-percentage> है, तो दो वैल्यू इंटरपोलेट की जा सकती हैं. […]

interpolate-size प्रॉपर्टी, इनहेरिट की जाने वाली प्रॉपर्टी है. इसलिए, पूरे दस्तावेज़ के लिए, इन्सट्रिंसिक साइज़िंग कीवर्ड पर ट्रांज़िशन करने और उनसे ट्रांज़िशन करने की सुविधा चालू करने के लिए, :root पर इसका एलान किया जा सकता है. हमारा सुझाव है कि आप इस तरीके का इस्तेमाल करें.

/* Opt-in the whole page to interpolate sizes to/from keywords */
:root {