CSS Transitions এবং hx-swap-oob ব্যবহার করে অ্যানিমেশন
HTMX এর hx-swap-oob (out-of-band) ফিচার এবং CSS Transitions একসাথে ব্যবহার করে আমরা একটি ওয়েব পৃষ্ঠায় স্নিগ্ধ অ্যানিমেশন এবং ডাইনামিক কন্টেন্ট আপডেট তৈরি করতে পারি। এখানে দেখানো হবে কিভাবে এই দুটি প্রযুক্তি একসাথে কাজ করে।
১. hx-swap-oob কি?
hx-swap-oob একটি HTMX ফিচার যা সার্ভার থেকে প্রাপ্ত নতুন কন্টেন্টকে DOM-এ একটি ভিন্ন উপায়ে যুক্ত করতে সহায়তা করে, অর্থাৎ এটি মূল লক্ষ্য উপাদানের বাইরে থাকা উপাদানগুলি আপডেট করতে পারে। এটি সাধারণত কন্টেন্ট সন্নিবেশের জন্য ব্যবহার হয় যা পেজের অন্যান্য অংশের সাথে ইন্টারঅ্যাক্ট করে।
২. উদাহরণ সেটআপ
২.১. HTML ফাইল তৈরি করা
প্রথমে একটি HTML ফাইল তৈরি করুন, উদাহরণস্বরূপ index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Transitions with hx-swap-oob</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script> <!-- HTMX CDN -->
<style>
/* Basic styles */
.box {
width: 100px;
height: 100px;
background-color: blue;
margin: 20px;
transition: transform 0.5s, opacity 0.5s;
opacity: 1;
}
.box.hidden {
opacity: 0;
transform: scale(0.5);
}
.box.visible {
opacity: 1;
transform: scale(1);
}
</style>
</head>
<body>
<h1>CSS Transitions and hx-swap-oob</h1>
<!-- Button to add new box -->
<button hx-get="/add-box" hx-target="#container" hx-swap="outerHTML" hx-swap-oob="true">Add Box</button>
<div id="container">
<div class="box visible"></div>
</div>
<script>
document.addEventListener('htmx:beforeSwap', function(event) {
// Add the hidden class to the box before it's replaced
if (event.detail.target.id === 'container') {
const boxes = event.detail.target.querySelectorAll('.box');
boxes.forEach(box => box.classList.add('hidden'));
}
});
document.addEventListener('htmx:afterSwap', function(event) {
// Remove the hidden class after the new box is added
const newBox = event.detail.elt.querySelector('.box');
if (newBox) {
newBox.classList.remove('hidden');
newBox.classList.add('visible');
}
});
</script>
</body>
</html>
২.২. সার্ভার সাইড কোড (Flask)
একটি নতুন Python ফাইল তৈরি করুন, উদাহরণস্বরূপ app.py এবং নিচের কোডটি যুক্ত করুন:
from flask import Flask, render_template_string
app = Flask(__name__)
@app.route('/')
def index():
return render_template_string(open('index.html').read())
@app.route('/add-box')
def add_box():
return '''
<div class="box visible"></div>
'''
if __name__ == '__main__':
app.run(debug=True)
৩. সার্ভার চালানো
৩.১. টার্মিনালে সার্ভার চালান
python app.py
৪. ব্রাউজারে পরীক্ষা করা
- ব্রাউজারে
http://127.0.0.1:5000/URL এ যান। - "Add Box" বোতামে ক্লিক করুন এবং দেখুন কিভাবে নতুন বক্স যুক্ত হচ্ছে এবং অ্যানিমেশন হচ্ছে।
সারসংক্ষেপ
- CSS Transitions: উপাদানের স্টাইল পরিবর্তনের সময় স্নিগ্ধ গতিশীলতা তৈরি করে।
hx-swap-oob: সার্ভার থেকে প্রাপ্ত কন্টেন্টকে DOM-এ সন্নিবেশ করার জন্য ব্যবহৃত হয়, যা ব্যবহারকারী ইন্টারঅ্যাকশনের সময় আরো কার্যকরী হয়।- অ্যানিমেশন: HTMX এবং CSS এর মাধ্যমে একসাথে কাজ করে, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।
HTMX এবং CSS Transitions একসাথে ব্যবহার করে, আপনি আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারবেন।
Read more
