انیمیشن ها (Animations)
می خواهیم «انیمیشن های AngularJS» را خیلی ساده بسازیم. «انیمیشن (Animation)» یعنی توهم حرکت در عناصر. برای شروع، صفحه انیمیشن های AngularJS را نشانک کن تا برگردی.
شروع سریع انیمیشن های AngularJS
با تیک زدن چک باکس، یک DIV پنهان می شود. «ng-hide» پنهان سازی را مدیریت می کند. این یک نمونه پایه است.
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
نکته: زیاده روی نکن. چند انیمیشن خوب، فهم رابط را آسان تر می کند.
افزودن ماژول ngAnimate
برای فعال سازی، کتابخانه «angular-animate» لازم است. سپس «ngAnimate» را وابستگی ماژول کن. «وابستگی (Dependency)» یعنی ماژول های موردنیاز یک ماژول.
<body ng-app="myApp">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
</body>
CSS Transitions برای انیمیشن
«ترنزیشن (Transition)» یعنی تغییر نرم مقادیر CSS در زمان مشخص. هنگام دریافت کلاس .ng-hide ارتفاع کم می شود.
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide {
height: 0;
}
</style>
CSS Animations برای انیمیشن
«کی فریم (Keyframes)» فریم های میانی را مشخص می کند. با دریافت .ng-hide، انیمیشن اجرا می شود.
<style>
@keyframes myChange {
from {
height: 100px;
}
to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
کلاس هایی که ngAnimate اضافه می کند
هنگام ورود، خروج، یا پنهان سازی، کلاس هایی مانند ng-enter، ng-leave و ng-hide اضافه می شوند. سپس CSS آن ها را متحرک می کند.
گام های عملی
- فایل angular-animate را اضافه کن.
- ngAnimate را وابستگی ماژول کن.
- از ng-hide یا ng-show استفاده کن.
- CSS ترنزیشن یا کی فریم بنویس.
- در ادیتور آنلاین تست و اصلاح کن.
هشدار: انیمیشن های سنگین، تجربه کاربر را کند می کنند. زمان ها را کوتاه نگه دار.
جمع بندی سریع
- ngAnimate فقط کلاس ها را مدیریت می کند.
- CSS حرکت را ایجاد می کند.
- Transition ساده تر است.
- Keyframes انعطاف بیشتری دارد.
- زیاد استفاده نکن.