जब किसी तत्व का संक्रमण प्रभाव शुरू होता है तो HTML DOM स्टाइल ट्रांज़िशन डिले प्रॉपर्टी वापस आती है और संशोधित होती है।
सिंटैक्स
निम्नलिखित वाक्य रचना है -
1. वापसी संक्रमणदेरी
object.transitionDelay
2. ट्रांजिशन डिले को संशोधित करना
object.transitionDelay = “value”
यहाँ, मान हो सकता है -
<टेबल> <थेड>यह इस गुण मान को उसके डिफ़ॉल्ट मान पर सेट करता है।
यह इस संपत्ति मूल्य को अपने मूल तत्व से प्राप्त करता है।
यह सेकंड (सेकंड) या मिलीसेकंड (एमएस) में एक संक्रमण प्रभाव की देरी का प्रतिनिधित्व करता है।
आइए हम HTML DOM स्टाइल ट्रांज़िशनडेले प्रॉपर्टी का एक उदाहरण देखें -
उदाहरण
<!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%;
transition: all 1s;
}
.show {
font-size: 1.2rem;
margin: 1rem 0;
}
</style>
<body>
<h1>DOM Style transitionDelay Property Demo</h1>
<div class='circle'></div>
<button onclick="set()" class="btn">Set TransitionDelay</button>
<div class="show">Now, hover on the square</div>
<script>
function set() {
document.querySelector('.circle').style.transitionDelay = "2s";
}
</script>
</body>
</html> आउटपुट
“संक्रमण विलंब सेट करें . पर क्लिक करें ” बटन पर क्लिक करें और फिर संक्रमण विलंब प्रभाव देखने के लिए “लाल” वर्ग पर होवर करें।
