HTML DOM Style transitionDuration प्रॉपर्टी

विवरण

HTML DOM Style transitionDuration प्रॉपर्टी HTML दस्तावेज़ में किसी तत्व पर ट्रांजिशन प्रभाव की अवधि को सेकंड (s) या मिलीसेकंड (ms) में प्राप्त और संशोधित करती है।

सिंटैक्स

1. transitionDuration प्राप्त करना

object.transitionDuration

2. transitionDuration संशोधित करना

object.transitionDuration = "value"

यहां value निम्नलिखित हो सकते हैं:

उदाहरण

आइए HTML DOM Style transitionDuration प्रॉपर्टी का एक उदाहरण देखें:

<!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 प्रॉपर्टी डेमो</h1> 
<div class='circle'></div> 
<button onclick="set()" class="btn">ट्रांजिशन बदलें</button> 
<div class="show">अब, वर्ग पर होवर करें</div> 
<script> 
  function set() { 
    document.querySelector('.circle').style.transitionDuration = "5s"; 
  } 
</script> </body> </html>

आउटपुट

"ट्रांजिशन सेट करें" बटन पर क्लिक करें और फिर "लाल" वर्ग पर होवर करके transitionDuration प्रभाव देखें।