AngularJS অ্যানিমেশন

সিএসএস এর সাহায্যে, অ্যাংগুলার জেস এনিমেশন ট্রানজিশন প্রদান করে。

এনিমেশন কি?

এনিমেশনটি এই বলতে হল যে, এইচটিএমএল ইলেমেন্টটির রূপান্তর আপনাকে একটি চলমান ভুল অনুভব দেয়。

ইনস্ট্যান্স

চেকবক্সটি সিলেক্ট করে ডিভ-কে লুকান:

<body ng-app="ngAnimate">
DIV-কে লুকান: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>

আপনার হাতে চাপান

অ্যাপলিকেশনটি এনিমেশনগুলিতে পূর্ণ হবে না, কিন্তু কিছু এনিমেশন অ্যাপলিকেশনটিকে সহজতর বোঝাতে সাহায্য করতে পারে。

আমি কি চাই?

আপনার অ্যাপলিকেশনটি এনিমেশনের জন্য প্রস্তুত থাকতে হবে, তার জন্য আপনাকে অ্যাংগুলার জেস এনাইমেট লাইব্রেরি সমেত করতে হবে:

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-animate.js"></script>

তারপর, আপনাকে প্রোগ্রামে এই মডিউলটি উল্লেখ করতে হবে ngAnimate মডিউল:

<body ng-app="ngAnimate">

অথবা, যদি আপনার প্রোগ্রামের নাম থাকে, তবে ngAnimate এই প্রোগ্রামটির জন্য প্রয়োজনীয় নির্ভরকে যোগ করুন:

ইনস্ট্যান্স

<body ng-app="myApp">
<h1>ডিভি লুকানো: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

আপনার হাতে চাপান

ngAnimate-এর কাজ কী হয়?

ngAnimate মডিউলটি ক্লাস যোগ করা এবং অপসারিত করবে

ngAnimate মডিউলটি আপনার HTML এলিমেন্টকে এনিমেশন করবে না, কিন্তু যখন ngAnimate যখন কোনও ইভেন্ট (যেমন HTML এলিমেন্টের লুকানো বা দেখানো) ঘটে, এই এলিমেন্টটি কিছু পূর্বনির্ধারিত ক্লাস মান পাবে, যেগুলোকে এনিমেশন তৈরির জন্য ব্যবহার করা যাবে

AngularJS-এর মধ্যে ক্লাস যোগ করা এবং অপসারিত করার ইনসক্রিপশনগুলোর মধ্যে রয়েছে:

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

ng-show এবং ng-hide ইনসক্রিপশনটি যোগ করা এবং অপসারিত করবে ng-hide ক্লাস মান

অন্যান্য ইনসক্রিপশনগুলো যখন DOM-এ প্রবেশ করে ng-enter ক্লাস মান, এবং DOM থেকে অপসারিত হলে যোগ করবে ng-leave অ্যাট্রিবিউট

যখন HTML এলিমেন্টটির অবস্থান পরিবর্তন করা হয়ng-repeat ইনসক্রিপশনটি এছাড়াও যোগ করবে ng-move ক্লাস মান

এছাড়া, এনিমেশন প্রক্রিয়ার সময়, HTML এলিমেন্টটির একটি ক্লাস মান গুচ্ছ হবে, এনিমেশন সমাপ্ত হলে এই ক্লাস মানগুলো অপসারিত হবে। উদাহরণস্বরূপ:ng-hide ইনসক্রিপশনটি এই ক্লাস মানগুলো যোগ করবে:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add（যদি এলিমেন্টটি লুকানো হয় তবে）
  • ng-hide-remove（যদি এলিমেন্টটি দেখানো হয় তবে）
  • ng-hide-add-active（যদি এলিমেন্টটি লুকানো হয় তবে）
  • ng-hide-remove-active（যদি এলিমেন্টটি দেখানো হয় তবে）

CSS-এর মাধ্যমে এনিমেশন প্রক্রিয়া

আমরা CSS পরিবর্তন এবং CSS এনিমেশন ব্যবহার করে HTML এলিমেন্টকে এনিমেশন এফেক্ট যোগ করতে পারি। এই ট্যুটোরিয়ালটি একদীর্ঘে এগুলোকে দেখাবে

CSS এনিমেশন সম্পর্কে আরও বেশি জানতে, আমাদের CSS পরিবর্তন এবং CSS এনিমেশন ট্যুটোরিয়াল পড়ুন

CSS পরিবর্তন

CSS পরিবর্তন দেয় আপনাকে, দেওয়া সময়কালের মধ্যে, একটি CSS অ্যাট্রিবিউট মানকে আরেকটি মানে সমস্ত সুবিধা পাবে

ইনস্ট্যান্স

যখন DIV ইলেকট্রনিকেল অর্থাৎ .ng-hide সময়ের পরিবর্তনের সময়, এটি 0.5 সেকেন্ড স্থায়ী হবে, উচ্চতা 100px থেকে 0: সমস্ত সুবিধা পাবে

@keyframes myChange {
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}
.ng-hide {
  height: 0;
}
</style>

আপনার হাতে চাপান

CSS অ্যানিমেশন

CSS অ্যানিমেশন দিয়ে আপনি দিয়েছেন কিছু সময়ের মধ্যে, একটি CSS প্রতিকূলকের মান একটি অন্য মানে সমস্ত করতে পারেন:

ইনস্ট্যান্স

যখন DIV ইলেকট্রনিকেল অর্থাৎ .ng-hide <style>

@keyframes myChange {
from {
  to {
    height: 100px;
  }
    height: 0;
  }
}
div {
  height: 100px;
  background-color: lightblue;
}
div.ng-hide {
  animation: 0.5s myChange;
}
</style>

আপনার হাতে চাপান