CSS এর মাধ্যমে বেসিক Animation যোগ করা

Riot.js-এ CSS এর মাধ্যমে বেসিক অ্যানিমেশন যোগ করা খুবই সহজ। Riot.js কম্পোনেন্টে আপনি সরাসরি CSS ব্যবহার করে অ্যানিমেশন এবং ট্রানজিশন যোগ করতে পারেন। CSS অ্যানিমেশন বা ট্রানজিশন ব্যবহার করলে আপনি DOM এর উপাদানগুলিতে সহজেই গতিশীলতা এবং অ্যানিমেশন যোগ করতে পারবেন।

CSS অ্যানিমেশন যোগ করার জন্য প্রয়োজনীয় ধাপ:

1. CSS অ্যানিমেশন: CSS অ্যানিমেশনগুলি কিওয়ার্ড যেমন @keyframes ব্যবহার করে তৈরি করা হয়, যেখানে আপনি অ্যানিমেশনটির শুরু এবং শেষের অবস্থা নির্ধারণ করেন।
2. CSS ট্রানজিশন: CSS ট্রানজিশন ব্যবহার করে আপনি নির্দিষ্ট একটি স্টাইল পরিবর্তন করার সময় অ্যানিমেশন যুক্ত করতে পারেন। উদাহরণস্বরূপ, যখন ব্যবহারকারী একটি বাটনে হোভার করবে, তখন কিছু পরিবর্তন বা অ্যানিমেশন ঘটবে।

Riot.js-এ CSS অ্যানিমেশন যোগ করার উদাহরণ:

১. বেসিক CSS অ্যানিমেশন উদাহরণ:

ধরা যাক, আপনি একটি কম্পোনেন্ট তৈরি করতে চান যেখানে একটি বাটন ক্লিক করলে একটি টেক্সট ধীরে ধীরে ফেড ইন/আউট হবে।

<!-- AnimationExample.riot -->
<animation-example>
  <button onclick={toggleVisibility}>Toggle Text Visibility</button>
  <p if={isVisible} class="fade-in">This is a fading text!</p>

  <script>
    export default {
      onMounted() {
        this.isVisible = false;  // Initially the text is hidden
      },
      
      toggleVisibility() {
        this.isVisible = !this.isVisible;  // Toggle visibility on button click
      }
    }
  </script>

  <style>
    /* Basic Fade-In animation */
    .fade-in {
      animation: fadeIn 2s ease-in-out;
    }

    /* @keyframes for fadeIn animation */
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  </style>
</animation-example>

ব্যাখ্যা:

• @keyframes fadeIn: এখানে @keyframes ব্যবহার করে একটি fadeIn অ্যানিমেশন তৈরি করা হয়েছে যা opacity পরিবর্তন করে।
• <p if={isVisible}>: isVisible যদি true হয়, তবে <p> ট্যাগটি UI তে প্রদর্শিত হবে। এবং যখন এটি প্রদর্শিত হবে, তখন fade-in ক্লাসটির মাধ্যমে অ্যানিমেশন শুরু হবে।
• toggleVisibility(): বাটনে ক্লিক করলে isVisible ভেরিয়েবলের মান পাল্টে যাবে, এবং টেক্সটের দৃশ্যমানতা পরিবর্তিত হবে।

২. CSS ট্রানজিশন উদাহরণ:

এখানে, আমরা একটি বাটনে হোভার করার সময় একটি ব্যাকগ্রাউন্ড কালার পরিবর্তন সহ অ্যানিমেশন যোগ করব।

<!-- HoverAnimation.riot -->
<hover-animation>
  <button class="hover-button">Hover over me!</button>

  <script>
    export default {
      onMounted() {
        // No JS code needed for this animation, it's controlled by CSS
      }
    }
  </script>

  <style>
    /* Button styling */
    .hover-button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.3s ease; /* Apply transition */
    }

    /* On hover, change background color and add a little scale effect */
    .hover-button:hover {
      background-color: #45a049;
      transform: scale(1.1);  /* Slightly enlarge the button */
    }
  </style>
</hover-animation>

ব্যাখ্যা:

• transition: background-color 0.3s ease, transform 0.3s ease;: এখানে transition ব্যবহার করে বাটনের ব্যাকগ্রাউন্ড রঙ এবং স্কেল (আকার পরিবর্তন) ০.৩ সেকেন্ডের মধ্যে অ্যানিমেটেড করা হয়েছে।
• hover-button:hover: বাটনে মাউস হোভার করার সময় ব্যাকগ্রাউন্ড কালার পরিবর্তিত হবে এবং বাটনের আকার একটু বড় হবে (স্কেল হবে)।

CSS অ্যানিমেশন এবং ট্রানজিশন এর পার্থক্য:

• CSS অ্যানিমেশন: @keyframes ব্যবহার করে একটি স্থিতিশীল অ্যানিমেশন তৈরি করা হয়। এটি কিছু নির্দিষ্ট সময়ের মধ্যে উপাদানকে একাধিক অবস্থায় পরিবর্তন করে। উদাহরণস্বরূপ, একটি টেক্সটের রঙ পরিবর্তন হতে পারে বা কোনো উপাদান ধীরে ধীরে বড় হয়ে উঠতে পারে।
• CSS ট্রানজিশন: এটি সাধারণত একটি নির্দিষ্ট অবস্থান থেকে অন্য অবস্থানে হালকা পরিবর্তন করার জন্য ব্যবহার করা হয়, যেমন মাউস হোভার করার সময় একটি প্রপার্টি পরিবর্তন।

Riot.js-এ CSS অ্যানিমেশন যুক্ত করার কিছু টিপস:

1. CSS মডুলার স্টাইল: Riot.js আপনাকে প্রতিটি কম্পোনেন্টের জন্য আলাদা CSS স্টাইল ব্যবহার করার সুযোগ দেয়। ফলে, প্রতিটি কম্পোনেন্টের স্টাইল এবং অ্যানিমেশন আলাদাভাবে পরিচালনা করা সম্ভব হয়।
2. স্টাইল শ্যাডো DOM: Riot.js কম্পোনেন্টে স্কোপড স্টাইল ব্যবহার করা হয়, যা শুধু সেই কম্পোনেন্টের মধ্যে প্রভাব ফেলবে এবং অ্যাপ্লিকেশনের বাকি অংশে কোনও প্রভাব ফেলবে না।
3. ডায়নামিক অ্যানিমেশন: CSS অ্যানিমেশনকে JavaScript এর মাধ্যমে ডায়নামিকভাবে নিয়ন্ত্রণ করতে পারেন, যেমন কোনও ইভেন্টের জন্য অ্যানিমেশন শুরু বা বন্ধ করা।

সারসংক্ষেপ:

Riot.js-এ CSS অ্যানিমেশন যোগ করা সহজ এবং সুন্দরভাবে UI-তে গতিশীলতা যোগ করে। আপনি CSS অ্যানিমেশন এবং CSS ট্রানজিশন ব্যবহার করে বাটন, টেক্সট, অথবা যেকোনো HTML উপাদানে অ্যানিমেশন প্রয়োগ করতে পারেন। এটি আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করে তোলে।