विवरण
HTML DOM Style transition प्रॉपर्टी HTML दस्तावेज़ में किसी HTML तत्व के ट्रांजिशन CSS प्रॉपर्टी के मान को प्राप्त और संशोधित करती है।
सिंटैक्स
1. transition प्राप्त करना
object.transition
2. transition संशोधित करना
object.transition = "value"
यहां value निम्नलिखित हो सकते हैं:
| मान | व्याख्या |
|---|---|
| initial | इस प्रॉपर्टी को उसके डिफ़ॉल्ट मान पर सेट करता है। |
| inherit | इस प्रॉपर्टी का मान अपने पैरेंट तत्व से विरासत में लेता है। |
| property duration timing-function delay | यहां, property उस CSS प्रॉपर्टी का नाम दर्शाता है जिस पर ट्रांजिशन होगा। timing-function ट्रांजिशन प्रभाव के स्पीड कर्व को दर्शाता है। delay दर्शाता है कि ट्रांजिशन प्रभाव कब शुरू होगा। |
उदाहरण
आइए HTML DOM Style transition प्रॉपर्टी का एक उदाहरण देखें:
<!DOCTYPE html> <html> <style>
body {
color: #000;
height: 100vh;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem 0;
}
.circle {
height: 100px;
width: 100px;
background-color: #db133a;
}
.circle:hover {
height: 200px;
width: 200px;
border-radius: 50%;
}
.show {
font-size: 1.2rem;
margin: 1rem 0;
}
</style> <body>
<h1>DOM Style transition प्रॉपर्टी डेमो</h1>
<div class='circle'></div>
<button onclick="set()" class="btn">ट्रांजिशन सेट करें</button>
<div class="show">अब, वर्ग पर होवर करें</div>
<script>
function set() {
document.querySelector('.circle').style.transition = "all 1s";
}
</script> </body> </html>
आउटपुट
"ट्रांजिशन सेट करें" बटन पर क्लिक करें और फिर "लाल" वर्ग पर होवर करके ट्रांजिशन प्रभाव देखें।
