इस मैनुअल में, हम डिव को दिखाने और छिपाने की प्रक्रिया सीखेंगे ' संक्रमण 'सीएसएस की संपत्ति।
CSS में ट्रांजिशन के साथ Div को कैसे दिखाएँ और छिपाएँ?
सीएसएस ' संक्रमण 'संपत्ति एक विशिष्ट अवधि के आधार पर संपत्ति के मूल्य को बदलना आसान बनाती है। यह अपने राज्य के आधार पर एक अस्थायी या सक्रिय तत्व हो सकता है। इसके अलावा, CSS की ट्रांज़िशन प्रॉपर्टी का उपयोग HTML में div को दिखाने और छिपाने के लिए किया जाता है।
अब, ट्रांज़िशन प्रॉपर्टी के सिंटैक्स पर चलते हैं।
वाक्य - विन्यास
ट्रांज़िशन प्रभाव बनाते समय आपको दो चीज़ें निर्दिष्ट करनी होंगी:
मूल रूप से, ' संक्रमण ” चार अन्य संपत्तियों से युक्त एक आशुलिपि संपत्ति है, जो नीचे दी गई है:
संक्रमण : संक्रमण-संपत्ति संक्रमण-अवधिसंक्रमण-समय-कार्य संक्रमण-देरी
यहाँ उल्लिखित गुणों का विवरण दिया गया है:
- संक्रमण-संपत्ति: इसका उपयोग किसी भी सीएसएस संपत्ति में संक्रमण को सेट करने के लिए किया जाता है। जैसे कि चौड़ाई, ऊंचाई, अपारदर्शिता, और भी बहुत कुछ।
- अवस्थांतर अवधि: इसका उपयोग संक्रमण की अवधि को निर्दिष्ट करने के लिए किया जाता है।
- संक्रमण-समय-कार्य: इसका उपयोग संक्रमण की गति निर्धारित करने के लिए किया जाता है।
- संक्रमण-विलंब: यह उस समय को निर्दिष्ट करता है जब संक्रमण शुरू होता है या देरी करता है।
आइए एक उदाहरण लेते हैं जिसमें हम 'के साथ डिव को दिखाएंगे और छिपाएंगे' संक्रमण 'सीएसएस की संपत्ति। इस उद्देश्य के लिए, सबसे पहले, हम एक ' डिव 'और एक इनपुट प्रकार' चेक बॉक्स '
चरण 1: डिव बनाएं और स्टाइल करें
<केंद्र> टैग के भीतर, हम <लेबल> टैग का उपयोग करके एक लेबल जोड़ेंगे और एक इनपुट प्रकार जोड़ेंगे जैसे ' चेक बॉक्स ' उसके बाद, एक डिव बनाएं और टैग को बंद कर दें।
एचटीएमएल
<केंद्र ><लेबल > डिव दिखाएं > <इनपुट प्रकार = 'चेकबॉक्स' >
>
इसके बाद, हम बैकग्राउंड-कलर प्रॉपर्टी का उपयोग करके डिव को स्टाइल करेंगे और बैकग्राउंड का रंग “के रूप में सेट करेंगे। आरजीबी(238, 190,118) ' हम डिव की ऊंचाई को 'के रूप में सेट करेंगे' 150पीएक्स 'और इसके चारों ओर की सीमा को' के रूप में समायोजित करें 10px ',' ' चोटी ', तथा ' आरजीबी (6, 56, 2) ' अंत में, हम फ़ॉन्ट-आकार को “के रूप में निर्दिष्ट करेंगे” 50px '
सीएसएस
डिव {पीछे का रंग : आरजीबी ( 238 , 190 , 118 ) ;
कद : 150पीएक्स ;
सीमा : 10px चोटी आरजीबी ( 6 , 56 , दो ) ;
फ़ॉन्ट आकार : 50px ;
}
ऊपर वर्णित कोड का आउटपुट नीचे दिया गया है। यहां, आप देख सकते हैं कि डिव और चेकबॉक्स सफलतापूर्वक बनाए गए हैं:
अब, अगले चरण पर जाएँ जिसमें हम ट्रांज़िशन प्रॉपर्टी का उपयोग करके डिव को छिपाते और दिखाते हैं।
चरण 2: संक्रमण के साथ एक डिव दिखाएँ और छिपाएँ
ऐसा करने के लिए, हम 'सेटिंग' द्वारा संक्रमण प्रभाव सेट करेंगे। अस्पष्टता ', इसकी अवधि' के रूप में 2s ”, और अपारदर्शिता का मान “ 0 ' div वर्ग में हमने CSS में बनाया है:
संक्रमण : अस्पष्टता 2s ;अस्पष्टता : 0 ;
टिप्पणी: हम 'पर संक्रमण लागू करेंगे' अस्पष्टता 'तत्व की पारदर्शिता निर्धारित करने के लिए संपत्ति। यहां, हम इसका मान निर्दिष्ट करेंगे ' 0 ”, जिसका अर्थ है कि जब संक्रमण शुरू होता है, तो div दो सेकंड के लिए छिपा दिया जाएगा।
ट्रांज़िशन मान सेट करने के बाद, हम “का उपयोग करेंगे” इनपुट 'HTML फ़ाइल में बनाए गए इनपुट प्रकार तक पहुँचने के लिए और इनपुट तत्व के छद्म-वर्ग को' के रूप में सेट करें :चेक किया गया ' फिर, हम बनाए गए डिव तक पहुंचेंगे, और ' + 'ऑपरेटर का उपयोग चेकबॉक्स को div के साथ जोड़ने के लिए किया जाएगा। इस प्रकार, जब चेकबॉक्स पर कोई ऑपरेशन किया जाता है, तो इसका उपयोग div को प्रभावित करेगा। इसके बाद, हम अपारदर्शिता मान को “के रूप में सेट करेंगे” 1 ':
इनपुट : जाँच + डिव {अस्पष्टता : 1
}
टिप्पणी: हम अपारदर्शिता मान को “के रूप में निर्दिष्ट करेंगे” 1 ”, जिसका अर्थ है कि जब चेकबॉक्स को चिह्नित किया जाता है, तो बनाया गया div दिखाया जाएगा। इसके अलावा, div . को छिपाने के लिए इसे अचिह्नित करें
जैसा कि आप देख सकते हैं, div को 'का उपयोग करके दिखाया और छिपाया गया है' संक्रमण 'संपत्ति और' :चेक किया गया 'छद्म वर्ग तत्व:
हमने सीएसएस में ट्रांज़िशन प्रॉपर्टी के साथ डिव को छिपाने और दिखाने की विधि के बारे में बताया है।
निष्कर्ष
एक डिव को दिखाने और छिपाने के लिए, ' संक्रमण 'संपत्ति और' :चेक किया गया 'छद्म वर्ग तत्व का उपयोग इस तरह से किया जाता है कि div अस्पष्टता का मान इस प्रकार सेट किया जाता है' 0 ”, और में: छद्म-वर्ग तत्व की जाँच की, अपारदर्शिता को “के रूप में सेट करें 1 ' जब उपयोगकर्ता चेकबॉक्स पर क्लिक करता है, तो div प्रदर्शित होगा, और जब यह अनियंत्रित हो जाता है, तो div छिप जाएगा। इस मैनुअल में, हमने ट्रांज़िशन प्रॉपर्टी का उपयोग करके डिव को छिपाने और दिखाने की विधि का वर्णन किया है।