HTML DOM TransitionEvent অবজেক্ট

HTML DOM TransitionEvent অবজেক্ট একটি ইভেন্টকে প্রতিনিধিত্ব করে যা ট্রানজিশনের সময় ঘটে।

এখানে "TransitionEvent" নিম্নলিখিত প্রপার্টি এবং মেথড গুলো 가질 수 있습니다:

উদাহরণ: TransitionEvent elapsedTime প্রপার্টি

<!DOCTYPE html> <html> <head> <title>TransitionEvent elapsedTime</title> <style>    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {       border-radius: 10px;    }    #playArea {       display: inline-block;       border-radius: 50%;       background-color: #DC3545;       width: 50px;       height: 50px;       border: 3px solid #AC3509;       transition: all 1.3s ease;    }    #playArea:hover {       transform:translateX(80px);    } </style> </head> <body>    <form>          <fieldset>          <legend>TransitionEvent-elapsedTime</legend>          <div id="playArea"></div>          <div id="divDisplay"></div>       </fieldset>    </form> <script>    var divDisplay = document.getElementById("divDisplay");    var playDisplay = document.getElementById("playArea");    function getElapsedTime(event) {       divDisplay.textContent = 'Elapsed Time in Transition: '+event.elapsedTime+' seconds';    }    playDisplay.addEventListener("transitionend", getElapsedTime); </script> </body> </html>

আউটপুট

ডিভ এলিমেন্টে হোভার করার আগে:

ডিভ এলিমেন্টে হোভার করার পর: