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