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

विवरण

HTML DOM Style transitionDelay प्रॉपर्टी किसी तत्व के ट्रांजिशन प्रभाव की शुरुआत कब होगी, इसे प्राप्त और संशोधित करती है।

सिंटैक्स

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

object.transitionDelay

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

object.transitionDelay = "value"

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

उदाहरण

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

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

आउटपुट

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