قسمت بیست و یکم AngularJS :چگونه با انگولار انیمیشن بسازیم ؟

خانه » مقالات اموزشی » javascript » قسمت بیست و یکم AngularJS :چگونه با انگولار انیمیشن بسازیم ؟
قسمت بیست و یکم AngularJS :چگونه با انگولار انیمیشن بسازیم ؟

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

2854

Calendar-amico (2)

تاریخ به‌روزرسانی:

۱۳۹۸-۰۳-۲۰

Work time-rafiki

زمان مطالعه:

5 دقیقه

باسلام ، هرسایتی بسته به نیازش برای زیبایی سایت خود از انیمیشن هایی تحت html و css استفاده میکند ، انگولار جی اس نیز مدیریت و تولید انیمیشن ها را کنترل میکند ، در این اموزش به نحوه ی ساخت انیمیشن با انگولار جی اس خواهیم پرداخت.

پیشنهاد میشود قبل از ورود به این قسمت از اموزش های انگولار جی اس سایر قسمت های دوره انگولار جی اس را مطالعه کنید.

انگولار جی اس انتقال انیمیشن و پویا نمایی ان را با کمک css ارائه میدهد.

انیمیشن چیست ؟

یک انیمیشن زمانی اجرا میشود که تبدیل یک عنصر html نیاز به حرکت داشته باشد.

برای درک بهتر این موضوع چک باکس زیر را اجرا کنید و لمس کنید تا تگ div مخفی شود.

یک اپلیکیشن نیاز نیست حتما پرشده از انیمیشن باشد ، اما اپلیکیشن ها به شما کمک خواهند کرد تا ساده تر انها را درک کنید و با انها کار کنید.

به چه ابزار هایی نیاز دارید ؟

برای کار با انیمیشن ها در برنامه ی انگولاری ، تنها نیاز دارید تا کتابخانه زیر را به برنامه ی خود اضافه کنید.

بعد از اضافه کردن کتابخانه بالا به اپلیکیشن باید با استفاده از ماژول ngAnimate محدوده ی animation خود را مشخص کنید. برای مثال :

یا اگر برنامه شما یک نام داشته باشد، ngAnimate را به عنوان وابستگی در ماژول برنامه خود اضافه کنید:

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:

CSS Animations

CSS Animations به شما اجازه می دهد مقدار ارزش ملک CSS را به طور هماهنگ، از یک مقدار به دیگری، در مدت زمان مشخصی تغییر دهید:

هنگامی که عنصر DIV کلاس “.ng-hide” را دریافت می کند، animation myChange اجرا می شود که به طور صحیح ارتفاع را از 100px به 0 تغییر می دهد.

امیدوارم از این سری اموزش های کدپز هم استفاده کافی برده باشید . برای مطالعه موارد بیشتر میتوانید به سایت w3schools مراجعه فرمایید.

درصورت داشتن هرگونه سوال نظر انتقاد یا پیشنهاد از راه های ارتباطی مانند کامنت ها و شبکه های اجتماعی با ما درتماس باشید.

یاعلی

مرتضی افضلی

مرتضی افضلی

این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید. با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.

تا کنون 264 نفر در کدپز ثبت نام کرده اند.

دیدگاهتان را بنویسید