AngularJS এনিমেশন
সিএসএস এর সাহায্যে AngularJS ট্রানজিশন(transition) এনিমেনশন সরবরাহ করে।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
<style>
div {
transition: all linear 0.5s;
background-color: green;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
}
.ng-hide {
height: 0;
width: 0;
background-color: transparent;
top:-200px;
left: 200px;
}
</style>
</head>
<body ng-app="ngAnimate">
<h3>DIV হাইড করুনঃ <input type="checkbox" ng-model="myCheck"></h3>
<div ng-hide="myCheck"></div>
</body>
</html>
ফলাফল
এপ্লিকেশনে প্রচুর পরিমাণে এনিমেশন ব্যবহার করা উচিৎ না। কিন্তু মাঝে মাঝে এই এনিমেশনই আপনার এপ্লিকেশনকে বুঝার জন্য সহজ করে তুলে।
এনিমেশন যোগ করার জন্য আপনার কি দরকার পড়বে?
আপনার এপ্লিকেশনকে এনিমেশনের জন্য প্রস্তুত করে তোলার জন্য আপনাকে অবশ্যই AngularJS এনিমেশন লাইব্রেরী সংযোজন করতে হবে।
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-animate.js"></script>
তারপরে আপনাকে আপনার এপ্লিকেশনে অবশ্যই ngAnimate মডিউল(module) সংযোজন করতে হবে।
<body ng-app="ngAnimate">
অথবা যদি আপনার এপ্লিকেশনের নাম থাকে তাহলে ngAnimate কে ডিপেন্ডেন্সি(dependency) হিসাবে আপনার এপ্লিকেশন মডিউলে যোগ করতে হবে।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
<style>
div {
transition: all linear 0.5s;
background-color: green;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
}
.ng-hide {
height: 0;
width: 0;
background-color: transparent;
top:-200px;
left: 200px;
}
</style>
</head>
<body ng-app="myApp">
<h3>DIV হাইড করুনঃ <input type="checkbox" ng-model="myCheck"></h3>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
</body>
</html>
ফলাফল
ngAnimate কি করতে পারে?
ngAnimate মডিউল class যুক্ত অথবা অপসারণ করতে পারে।
ngAnimate মডিউল আপনার এইচটিএমএল এলিমেন্টের এনিমেশন তৈরি করে না, বরং যখন কোনো ঘটনা ঘটে যেমন- hide অথবা show তখন এইচটিএমএল এলিমেন্ট কিছু পূর্ব নির্ধারিত class কে কল করে এনিমেশন সৃষ্টি করে।
class যুক্ত অথবা অপসারণ করে এমন কিছু AngularJS ডিরক্টিভ নিম্নে তুলে ধরা হলঃ
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
ng-show এবং ng-hide ডিরেক্টভি(directive) ng-hide ক্লাসকে যুক্ত বা অপসারণ করে।
ইউজার যখন DOM এ প্রবেশ করে তখন ng-enter ডিরেক্টিভ(directive) যোগ হয়। পক্ষান্তরে DOM থেকে বের হয়ে গেলে ng-leave ডিরেক্টিভ যোগ হয়।
যখন এইচটিএমএল এলিমেন্টের পজিশন পরিবর্তন হয় তখন ng-repeat ডিরেক্টিভ(directive) ng-move ক্লাস যোগ করে
এছাড়া এনিমেশনের সময়ে এইচটিএমএল এলিমেন্টের কিছু HTML ক্লাস ভ্যালু রয়েছে এনিমেশন সম্পন্ন হলে যেগুলো অপসারিত হয়। উদাহরণস্বরূপঃ
ng-hide ডিরেক্টিভ নিম্নোক্ত ক্লাস ভ্যালু যোগ করেঃ
ng-animateng-hide-animateng-hide-add(true হলে এলিমেন্টি অদৃশ্য হয়ে যাবে)ng-hide-remove(true হলে এলিমেন্টি দৃশ্যমান হবে)ng-hide-add-active(true হলে এলিমেন্টি অদৃশ্য হয়ে যাবে)ng-hide-remove-active(true হলে এলিমেন্টি দৃশ্যমান হবে)
সিএসএস এর মাধ্যমে এনিমেশন তৈরি করা
এইচটিএমএল এলিমেন্টে এনিমেশন দেওয়ার জন্য আমরা সিএসএস ট্রানজিশন(transition) অথবা সিএসএস এনিমেশন(animation) ব্যবহার করতে পারি।
সিএসএস ট্রানজিশন(transition)
একটি নির্দিষ্ট সময়ের সাপেক্ষে সিএসএস ট্রানজিশন(transition) এর মাধ্যমে আপনি খুব সহজেই সিএসএস এর প্রোপার্টি, ভ্যালু পরিবর্তন করতে পারেন।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
<style>
div {
transition: all linear 0.5s;
background-color: green;
height: 100px;
}
.ng-hide {
height: 0;
}
</style>
</head>
<body ng-app="myApp">
<h3>DIV হাইড করুনঃ <input type="checkbox" ng-model="myCheck"></h3>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
</body>
</html>
ফলাফল
সিএসএস এনিমেশন
একটি নির্দিষ্ট সময়ের সাপেক্ষে সিএসএস এনিমেশনের মাধ্যমে আপনি খুব সহজেই সিএসএস এর প্রোপার্টি : ভ্যালু পরিবর্তন করতে পারেন।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: green;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
</head>
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck">
</div>
</body>
</html>
ফলাফল
সিএসএস এনিমেশন এবং ট্রানজিশন সম্মন্ধে আরো জানতে আমাদের সিএসএস ট্রানজিশন এবং সিএসএস এনিমেশন টিউটোরিয়াল ভিজিট করুন।