HTML DOM स्टाइल ट्रांज़िशनड्यूरेशन प्रॉपर्टी एक HTML दस्तावेज़ में सेकंड (सेकंड) या मिलीसेकंड (ms) में किसी तत्व पर संक्रमण प्रभाव की अवधि लौटाती है और संशोधित करती है।
सिंटैक्स
निम्नलिखित वाक्य रचना है -
<मजबूत>1. वापसी संक्रमणअवधि
object.transitionDuration
<मजबूत>2. संक्रमण अवधि संशोधित करना
object.transitionDuration = “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 transitionDuration Property Demo</h1>
<div class='circle'></div>
<button onclick="set()" class="btn">Change Transition</button>
<div class="show">Now, hover on the square</div>
<script>
function set() {
document.querySelector('.circle').style.transitionDuration = "5s";
}
</script>
</body>
</html> आउटपुट
“संक्रमण सेट करें . पर क्लिक करें ” बटन पर क्लिक करें और फिर “लाल . पर होवर करें संक्रमण अवधि प्रभाव देखने के लिए वर्ग।
