मैं सीएसएस में तत्व की अस्पष्टता 0 पर सेट करना चाहता हूं। लेकिन पता चला, यह वास्तव में शुरुआत में 0 नहीं है। यदि मैं अस्पष्टता के लिए संक्रमण सेट करता हूं, तो यह दर्शाता है कि तत्व पहले पूरी तरह से अपारदर्शी है और धीरे-धीरे दूर हो जाता है। यह मेरा सीएसएस है:

.nav-overlay {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="nav-overlay">
     <h1>Test</h1>
  </div>
</body>
</html>

क्या यह सामान्य है ? अगर मैं अपने एचटीएमएल में सीएसएस वर्ग को <style> टैग के अंदर रखता हूं, तो तत्व की अस्पष्टता तुरंत 0 होती है। कक्षा को अलग सीएसएस फ़ाइल बनाम सीधे HTML में <style> टैग के अंदर डालने के बीच अलग व्यवहार क्यों?

3
Putu Prema 16 अक्टूबर 2020, 12:35

1 उत्तर

सबसे बढ़िया उत्तर

जैसा कि Amaury Hanser ने सुझाव दिया था, एक बार CSS फ़ाइल लोड और पार्स हो जाने के बाद, opacity पहले से ही 1 के डिफ़ॉल्ट मान पर है।

आप HTML में तुरंत opacity के लिए प्रारंभिक मान सेट कर सकते हैं:

<div class="nav-overlay" style="opacity:0">
  <h1>Test</h1>
</div>

या आप एक स्क्रिप्ट लिख सकते हैं जो पेज लोड होने के बाद आपकी ट्रांज़िशन प्रॉपर्टी जोड़ती है:

window.onload = function() {
  var element = document.getElementsByClassName("nav-overlay")[0];
  element.style.transition = "opacity 0.3s ease-in-out";
};

इनमें से कोई भी ठीक है, हालांकि मुझे लगता है कि एचटीएमएल तत्व सीधे पर शैली सेट करना आपके एचटीएमएल के भीतर <style> टैग का उपयोग करने से थोड़ा साफ है। (जब तक यह आपके मामले के लिए काम करता है)

0
Eddie Reeder 16 अक्टूबर 2020, 10:23