Riot.js তে Animations এবং Transitions পরিচালনা করা খুবই সহজ এবং স্বাভাবিকভাবে কাজ করে। CSS Transitions এবং CSS Animations ব্যবহার করে আপনি কম্পোনেন্টের মধ্যে আকর্ষণীয় অ্যানিমেশন এবং পরিবর্তন তৈরি করতে পারেন। Riot.js আপনাকে ডেটা পরিবর্তনের ভিত্তিতে UI আপডেট করতে দেয়, এবং আপনি CSS এর মাধ্যমে অ্যানিমেশন এবং ট্রানজিশনগুলি নিয়ন্ত্রণ করতে পারেন।
১. CSS Transitions in Riot.js
CSS Transitions হল এক ধরনের অ্যানিমেশন যা একটি স্টাইল প্রপার্টির পরিবর্তনকে মসৃণভাবে প্রদর্শন করে। এটি সাধারণত স্টাইলের একটি পরিবর্তন (যেমন opacity, transform, background-color ইত্যাদি) তে পরিবর্তন হওয়ার সময় একটি মসৃণ অ্যানিমেশন তৈরি করে।
উদাহরণ: Simple CSS Transition
<!-- MyComponent.riot -->
<my-component>
<button onclick={toggleVisibility}>Toggle Visibility</button>
<div class="box" if={isVisible}></div>
<script>
export default {
onMounted() {
this.isVisible = false;
},
toggleVisibility() {
this.isVisible = !this.isVisible;
}
}
</script>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.box[if] {
opacity: 1;
}
</style>
</my-component>
ব্যাখ্যা:
opacityএর উপর একটি ট্রানজিশন দেওয়া হয়েছে যা 0 থেকে 1 এ পরিবর্তিত হয় যখনisVisibleসত্য হয়।transition: opacity 0.5s ease-in-out;এর মাধ্যমে অ্যানিমেশন 0.5 সেকেন্ডে সম্পন্ন হয় এবং এটি মসৃণভাবে শুরু এবং শেষ হয়।
২. CSS Animations in Riot.js
CSS Animations ব্যবহার করে আপনি কম্পোনেন্টে আরো জটিল অ্যানিমেশন তৈরি করতে পারেন। এটি একটি নির্দিষ্ট সময়ের জন্য নির্ধারিত ধাপগুলির মাধ্যমে পরিবর্তন করে।
উদাহরণ: Simple CSS Animation
<!-- MyComponent.riot -->
<my-component>
<button onclick={startAnimation}>Start Animation</button>
<div class="animate-box"></div>
<script>
export default {
startAnimation() {
this.update(); // Trigger re-render to apply animation
}
}
</script>
<style>
.animate-box {
width: 100px;
height: 100px;
background-color: blue;
animation: bounce 2s infinite;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}
</style>
</my-component>
ব্যাখ্যা:
- এখানে
.animate-boxএর উপর@keyframes bounceঅ্যানিমেশন ব্যবহার করা হয়েছে। অ্যানিমেশনটি 2 সেকেন্ডে একবার সম্পন্ন হয় এবংinfiniteদ্বারা এটি অনন্তকাল ধরে চলতে থাকে। - অ্যানিমেশনটি একটি বাউন্সের মত অনুভূতি তৈরি করে।
৩. CSS Transitions with Conditional Rendering (if and else)
Riot.js তে conditional rendering (if, else) ব্যবহার করলে আপনি কিছু কন্ডিশনাল অবস্থার ভিত্তিতে অ্যানিমেশন চালাতে পারেন। উদাহরণস্বরূপ, আপনি একটি div বা অন্য কোন উপাদান যদি এবং কেবল তখনই দেখাতে পারেন যখন একটি নির্দিষ্ট শর্ত সত্য হয়।
উদাহরণ: Conditional Rendering with Transition
<!-- MyComponent.riot -->
<my-component>
<button onclick={toggleVisibility}>Show/Hide Box</button>
<div class="box" if={isVisible}></div>
<script>
export default {
onMounted() {
this.isVisible = false;
},
toggleVisibility() {
this.isVisible = !this.isVisible;
}
}
</script>
<style>
.box {
width: 100px;
height: 100px;
background-color: green;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.box[if] {
opacity: 1;
}
</style>
</my-component>
ব্যাখ্যা:
- যখন
isVisibletrueহবে,divউপাদানটি দেখানো হবে এবংopacityপরিবর্তন হয়ে দৃশ্যমান হবে। - CSS
transitionদিয়েopacityএর পরিবর্তনটি 1 সেকেন্ডে মসৃণভাবে হবে।
৪. Riot.js Lifecycle Hooks and Animations
Riot.js-এ lifecycle hooks (যেমন onMounted, onUpdated, onUnmounted) ব্যবহার করে আপনি কম্পোনেন্টের অন্তর্গত অ্যানিমেশনগুলিকে আরও নিয়ন্ত্রণ করতে পারেন। আপনি কম্পোনেন্ট মাউন্ট বা আপডেট হওয়ার সময় অ্যানিমেশন চালাতে পারেন।
উদাহরণ: Animation with Lifecycle Hooks
<!-- MyComponent.riot -->
<my-component>
<div class="box" if={isVisible}></div>
<button onclick={toggleVisibility}>Toggle Box</button>
<script>
export default {
onMounted() {
console.log("Component mounted");
},
toggleVisibility() {
this.isVisible = !this.isVisible;
this.update(); // Ensure the component re-renders to trigger animation
}
}
</script>
<style>
.box {
width: 100px;
height: 100px;
background-color: purple;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.box[if] {
opacity: 1;
}
</style>
</my-component>
ব্যাখ্যা:
onMounted()হুকের মধ্যে আপনি যখন কম্পোনেন্ট মাউন্ট করবেন, তখন প্রথমে কিছু কার্যকলাপ যেমন লগ মেসেজ বা অ্যানিমেশন শুরু করতে পারেন।toggleVisibility()ফাংশন দিয়ে আপনিisVisibleপরিবর্তন করে কম্পোনেন্ট রেন্ডার করতে পারেন, যা অ্যানিমেশন ট্রিগার করবে।
৫. Riot.js Transition Hooks
Riot.js তে if বা each ডিরেকটিভগুলির সাথে transition hooks ব্যবহার করে আপনি অ্যানিমেশন চালাতে পারেন, যখন কোন কম্পোনেন্ট DOM থেকে ইনপুট বা আউটপুট হয়।
উদাহরণ: Transition Hooks in Riot.js
<!-- MyComponent.riot -->
<my-component>
<div class="box" if={isVisible}></div>
<button onclick={toggleVisibility}>Toggle Visibility</button>
<script>
export default {
onMounted() {
this.isVisible = false;
},
toggleVisibility() {
this.isVisible = !this.isVisible;
},
// Transition Hooks
onBeforeMount() {
console.log('Before mount animation');
},
onMounted() {
console.log('Mounted animation');
},
onBeforeUnmount() {
console.log('Before unmount animation');
},
onUnmounted() {
console.log('Unmounted animation');
}
}
</script>
<style>
.box {
width: 100px;
height: 100px;
background-color: orange;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.box[if] {
opacity: 1;
}
</style>
</my-component>
ব্যাখ্যা:
onBeforeMountএবংonBeforeUnmountহুকগুলি ব্যবহার করে আপনি যখন একটি কম্পোনেন্ট মাউন্ট বা আনমাউন্ট করবেন তখন কিছু অ্যানিমেশন শুরু করতে পারেন।
Riot.js তে animations এবং transitions ব্যবস্থাপনা CSS এর মাধ্যমে খুবই সহজ এবং কার্যকরী। আপনি CSS transitions এবং keyframes animations ব্যবহার করে কম্পোনেন্টের মধ্যে বিভিন্ন ধরনের অ্যানিমেশন এবং ট্রানজিশন তৈরি করতে পারেন। এছাড়া, Riot.js lifecycle hooks এবং transition hooks ব্যবহার করে অ্যানিমেশনগুলি আরো নিয়ন্ত্রিত এবং ডাইনামিকভাবে চালানো সম্ভব।
Read more
