مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. CSS3 دستوراتی را برای ایجاد افکت ها و انیمیشن های متنوع در فایل صفحه وب ارائه می دهد. که ما در طی دوره آموزش CSS به آن اشاره کردیم. همچنین HTML دارای تگ هایی برای متحرک سازی و ایجاد جلوه های انیمیشن در صفحه وب است. اکنون می خواهیم به مبحث آشنایی با animation یا آموزش انیمیشن در AngularJS ، بپردازیم.
AngularJS در زمینه ی ایجاد انیمیشن نیز دستوراتی را برای متحرک سازی و پویانمایی در صفحه وب ، ارائه می دهد. که در ادامه به بررسی آن می پردازیم.
آشنایی با animation یا انیمیشن در AngularJS
AngularJS با استفاده از CSS، جلوه های متحرک را در صفحه وب، فراهم می کند.
انیمیشن چیست
یک انیمیشن زمانی اتفاق می افتد که تبدیل یک عنصر HTML باعث ایجاد پویانمایی می شود.
مثال :
| <body ng-app="ngAnimate"> Hide the DIV: <input type="checkbox" ng-model="myCheck"> <div ng-hide="myCheck"></div> </body> |
برنامه های آنگولار نباید با انیمیشن های زیاد پر شوند. اما برخی از انیمیشن ها می توانند درک برنامه را آسان تر کنند.
ابزاری که برای انیمیشن نیاز است
برای اینکه برنامه های خود را برای انیمیشن آماده کنید. باید کتابخانه AngulateJS Animate را اضافه کنید:
مثال :
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script> |
سپس باید در برنامه به ماژول ngAnimate اشاره کنید:
مثال :
| <body ng-app="ngAnimate"> |
یا اگر برنامه ی شما نام هم دارد. عبارت ngAnimate را در بخش تعریف نام برنامه به شکل زیر وارد کنید:
مثال :
| <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> |
بررسی جزئیات ngAnimate
ماژول ngAnimate کلاس هایی را اضافه و حذف می کند.
ماژول ngAnimate عناصر HTML شما را تحریک نمی کند، اما هنگامی که در ngAnimate متوجه رویدادهایی خاص مانند پنهان کردن یا نمایش یک عنصر HTML می شوید، در واقع عنصر HTML، برخی از کلاس های از پیش تعریف شده را که می تواند برای ساخت انیمیشن استفاده شود. بکار می گیرد.
دستوراتی که در آنگولار ، کلاس ها را اضافه یا حذف می کنند:
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
دستور ng-show و ng-hide ، مقدار کلاس ng-hide را اضافه یا حذف می کند.
دستورات دیگر هنگام ورود به DOM ، یک کلاس ng-enter را اضافه یا حذف می کند. و یک صفت ng-leave را هنگام حذف شدن از DOM ، اضافه می کند.
زمانیکه موقعیت مکانی یک عنصر HTML تغییر می کند. دستور ng-repeat مقدار کلاس ng-move را اضافه می کند.
عنصر HTML دارای مقادیری از کلاس هاست که در زمان به پایان رسیدن انیمیشن، حذف می شود.
مثال:دستور ng-hide مقادیر کلاس های زیر را اضافه می کند:
ng-animateng-hide-animateng-hide-add (اگر عنصر HTML حذف شده باشد).ng-hide-remove (اگر عنصر HTML نمایان شده باشد).ng-hide-add-active (اگر عنصر HTML حذف شده باشد).ng-hide-remove-active (اگر عنصر HTML نمایان شده باشد).
ایجاد انیمیشن با استفاده از CSS
ما می توانیم از انتقال CSS یا انیمیشن CSS برای متحرک کردن عناصر HTML استفاده کنیم.
انمیشن transitions در CSS
transitions در CSS به شما این امکان را می دهد. که مقدار خصوصیت CSS را به طور هماهنگ، از یک مقدار به دیگری، در مدت زمان مشخصی تغییر دهید:
مثال :
| <style> div { transition: all linear 0.5s; background-color: lightblue; height: 100px; } .ng-hide { height: 0; } </style> |
انیمیشن در CSS
انیمیشن های CSS به شما این امکان را می دهد. که ارزش خصوصیت CSS را از یک مقدار به دیگری، در مدت زمان مشخصی تغییر دهید:
مثال :
| <style> @keyframes myChange { from { height: 100px; } to { height: 0; } } div { height: 100px; background-color: lightblue; } div.ng-hide { animation: 0.5s myChange; } </style> |
کلام آخر
طی آموزش مباحث آشنایی با animation یا انیمیشن در AngularJS ، شما با چگونگی ایجاد انیمیشن ها و جلوه های ساده در عناصر HTML در آنگولار ، آشنا شدید. همچنین مروری بر انیمیشن در CSS داشتیم. امیدواریم که این آموزش به اندازه ی کافی مفید و موثر بوده باشد.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
