ভূমিকা
HTML DOM Style transitionProperty প্রপার্টি একটি HTML ডকুমেন্টে একটি এলিমেন্টের ট্রানজিশন ইফেক্ট কোন CSS প্রপার্টির জন্য তা নির্দেশকারী CSS প্রপার্টির নাম রিটার্ন এবং মডিফাই করে।
সিনট্যাক্স
নিচে সিনট্যাক্স দেওয়া হলো:
১. transitionProperty রিটার্ন করা
object.transitionProperty
২. transitionProperty মডিফাই করা
object.transitionProperty = "value"
এখানে value হতে পারে:
| মান | ব্যাখ্যা |
|---|---|
| initial | এটি প্রপার্টির মানকে এর ডিফল্ট ভ্যালুতে সেট করে। |
| inherit | এটি প্যারেন্ট এলিমেন্ট থেকে প্রপার্টির মান ইনহেরিট করে। |
| all | এটি সব প্রপার্টিতে ট্রানজিশন ইফেক্ট সেট করে। |
| property | এটি CSS প্রপার্টির তালিকা উপস্থাপন করে। |
| none | এটি কোনো প্রপার্টি সিলেক্ট করে না। |
HTML DOM Style transitionProperty প্রপার্টির একটি উদাহরণ দেখা যাক:
উদাহরণ
<!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 transitionProperty Property Demo</h1> <div class='circle'></div> <button onclick="set()" class="btn">Change TransitionProperty</button> <div class="show">Now, hover on the square</div> <script> function set() { document.querySelector('.circle').style.transitionProperty = "border-radius"; } </script> </body> </html>
আউটপুট
"Change TransitionProperty" বাটনে ক্লিক করুন এবং তারপর "লাল" বর্গে হোভার করুন transitionProperty ইফেক্ট देखने के लिए।
