باسلام ، هرسایتی بسته به نیازش برای زیبایی سایت خود از انیمیشن هایی تحت html و css استفاده میکند ، انگولار جی اس نیز مدیریت و تولید انیمیشن ها را کنترل میکند ، در این اموزش به نحوه ی ساخت انیمیشن با انگولار جی اس خواهیم پرداخت.
پیشنهاد میشود قبل از ورود به این قسمت از اموزش های انگولار جی اس سایر قسمت های دوره انگولار جی اس را مطالعه کنید.
انگولار جی اس انتقال انیمیشن و پویا نمایی ان را با کمک css ارائه میدهد.
انیمیشن چیست ؟
یک انیمیشن زمانی اجرا میشود که تبدیل یک عنصر html نیاز به حرکت داشته باشد.
برای درک بهتر این موضوع چک باکس زیر را اجرا کنید و لمس کنید تا تگ div مخفی شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <style> div { transition: all linear 0.5s; background-color: lightblue; height: 100px; width: 100%; position: relative; top: 0; left: 0; } .ng-hide { height: 0; width: 0; background-color: transparent; top:-200px; left: 200px; } </style> < script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" ></script> < script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js" ></script> <body ng-app="ngAnimate"> <h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1> <div ng-hide="myCheck"></div> </body> </html> |
یک اپلیکیشن نیاز نیست حتما پرشده از انیمیشن باشد ، اما اپلیکیشن ها به شما کمک خواهند کرد تا ساده تر انها را درک کنید و با انها کار کنید.
به چه ابزار هایی نیاز دارید ؟
برای کار با انیمیشن ها در برنامه ی انگولاری ، تنها نیاز دارید تا کتابخانه زیر را به برنامه ی خود اضافه کنید.
|
1 |
< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js" ></script> |
بعد از اضافه کردن کتابخانه بالا به اپلیکیشن باید با استفاده از ماژول ngAnimate محدوده ی animation خود را مشخص کنید. برای مثال :
|
1 |
<body ng-app="ngAnimate"> |
یا اگر برنامه شما یک نام داشته باشد، ngAnimate را به عنوان وابستگی در ماژول برنامه خود اضافه کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <style> div { transition: all linear 0.5s; background-color: lightblue; height: 100px; width: 100%; position: relative; top: 0; left: 0; } .ng-hide { height: 0; width: 0; background-color: transparent; top:-200px; left: 200px; } </style> < script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" ></script> < script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js" ></script> <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> </html> |
ngAnimate چه کاربردی دارد ؟
ماژول ngAnimate کلاس ها را اضافه و حذف میکند.
ماژول ngAnimate عناصر HTML شما را حرکت نمی دهد، اما هنگامی که ngAnimate متوجه رویدادهایی خاص مانند پنهان کردن یا نمایش یک المان HTML می شوید، المان می تواند برخی از کلاس های از پیش تعریف شده را که می تواند برای ساخت انیمیشن استفاده شود.
دستورالعمل هایی که در AngularJS اضافه / حذف کلاس ها هستند عبارتند از:
- ng-show
- ng-hide
- ng-class
- ng-include
- ng-view
- ng-repeat
- ng-if
- ng-switch
دستورالعمل های ng-show و ng-hide به اضافه یا حذف یک مقدار کلاس ng-hide می پردازند.
دستورالعمل های دیگر هنگامی که وارد DOM می شوند و یک ویژگی ng-leave هنگامی که از DOM حذف می شوند، ارزش کلاس کلاس ng را اضافه می کنند.
دستورالعمل ng-repeat نیز یک مقدار class ng-move را هنگامی که عنصر HTML موقعیت را تغییر می دهد اضافه می کند.
علاوه بر این، در طول انیمیشن، عنصر HTML دارای مجموعه ای از مقادیر کلاس است که وقتی انیمیشن به پایان رسید حذف خواهد شد. مثال: دستور ng-hide این مقادیر کلاس را اضافه می کند:
- ng-animate
- ng-hide-animate
- ng-hide-add (هنگامی که المان مخفی شود.)
- ng-hide-remove (هنگامی که المان نمایان شود.)
- ng-hide-add-active (هنگامی که املنا مخفی شود.)
- ng-hode-remove-active (هنگامی که المان نمایان شود.)
استفاده از css در انیمیشنها
ما می توانیم از قواعد انتقال (transitions) CSS یا animations CSS برای متحرک سازی عناصر HTML استفاده کنیم. این آموزش هر دو را به شما نشان می دهد.
انتقال (transitions) CSS
انتقال CSS به شما اجازه می دهد مقدار ملک CSS را به طور هماهنگ، از یک مقدار به دیگری، در مدت زمان مشخصی تغییر دهید:
هنگامی که عنصر DIV class کلاس .ng-hide را دریافت می کند، گذار 0.5 ثانیه طول می کشد و ارتفاع آن هم از 100px به 0:
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> div { transition: all linear 0.5s; background-color: lightblue; height: 100px; } .ng-hide { height: 0; } </style> |
CSS Animations
CSS Animations به شما اجازه می دهد مقدار ارزش ملک CSS را به طور هماهنگ، از یک مقدار به دیگری، در مدت زمان مشخصی تغییر دهید:
هنگامی که عنصر DIV کلاس “.ng-hide” را دریافت می کند، animation myChange اجرا می شود که به طور صحیح ارتفاع را از 100px به 0 تغییر می دهد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> @keyframes myChange { from { height: 100px; } to { height: 0; } } div { height: 100px; background-color: lightblue; } div.ng-hide { animation: 0.5s myChange; } </style> |
امیدوارم از این سری اموزش های کدپز هم استفاده کافی برده باشید . برای مطالعه موارد بیشتر میتوانید به سایت w3schools مراجعه فرمایید.
درصورت داشتن هرگونه سوال نظر انتقاد یا پیشنهاد از راه های ارتباطی مانند کامنت ها و شبکه های اجتماعی با ما درتماس باشید.
یاعلی
