HTML DOM ট্রানজিশন ইভেন্ট অতিবাহিত সময়ের সম্পত্তি

HTML DOM TransitionEvent elapsedTime প্রপার্টি একটি ট্রানজিশন ইভেন্ট ট্রিগার করার সময় একটি ট্রানজিশন কত সেকেন্ড চলেছিল তার সাথে সম্পর্কিত একটি সংখ্যা প্রদান করে।

নিচের সিনট্যাক্স −

একটি ট্রানজিশন চালানো হয়েছে সেকেন্ডের রিটার্নিং সংখ্যা −

transitionEvent.elapsedTime

আসুন 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>

আউটপুট

div এলিমেন্ট −

-এর উপর হোভার করার আগে

HTML DOM ট্রানজিশন ইভেন্ট অতিবাহিত সময়ের সম্পত্তি

div উপাদান −

-এর উপর হোভার করার পরে

HTML DOM ট্রানজিশন ইভেন্ট অতিবাহিত সময়ের সম্পত্তি