آموزش انگولار

ساخت انیمیشن با انگولار – angularjs animation

AngularJS با استفاده از CSS، انتقال های متحرک را فراهم می کند.

انیمیشن چیست؟
یک انیمیشن زمانی است که تبدیل یک عنصر HTML موجب حرکت می شود.

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

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

برای اینکه برنامه های خود را برای انیمیشن آماده کنید، باید کتابخانه AngulateJS Animate را وارد برنامه کنید:

سپس شما باید به ماژول ngAnimate در برنامه خود مراجعه کنید:

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

چه ngAnimate انجام می دهد؟
ماژول ngAnimate کلاس ها را حذف و حذف می کند.

ماژول ngAnimate عناصر HTML شما را تحریک نمی کند، اما هنگامی که ngAnimate متوجه رویدادهایی خاص مانند پنهان کردن یا نمایش یک عنصر HTML می شوید، عنصر می تواند برخی از کلاس های از پیش تعریف شده را که می تواند برای ساخت انیمیشن استفاده شود.

دستورالعمل هایی که در AngularJS اضافه / حذف کلاس ها هستند عبارتند از:

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

دستورات ng-show و ng-hide دستور “ng-hide” را اضافه یا حذف می کنند.

دستورات دیگر هنگامی که آنها وارد DOM می شوند و یک خصیصه “ng-leave” می افزاید، هنگامی که از DOM حذف می شوند، مقدار کلاس “ng-enter” اضافه می شود.

دستور “ng-repeat” همچنین هنگامی که عنصر HTML موقعیت را تغییر می دهد، مقدار کلاس “ng-move” را اضافه می کند.

علاوه بر این، در طول انیمیشن، عنصر HTML دارای مجموعه ای از مقادیر کلاس است، که وقتی انیمیشن به پایان رسید حذف خواهد شد. به عنوان مثال: دستور “ng-hide” این مقادیر کلاس را اضافه می کند:

ng-animate
ng-hide-animated
ng-hide-add (اگر عنصر پنهان شود)
ng-hide-remove (اگر عنصر نمایش داده شود)
ng-hide-add-active (اگر عنصر پنهان شود)
ng-hide-remove-active (اگر عنصر نمایش داده شود)

انیمیشن ها با استفاده از CSS

ما می توانیم از انتقال CSS یا انیمیشن CSS برای متحرک کردن عناصر HTML استفاده کنیم. این آموزش هر دو را به شما نشان می دهد.

 

CSS Transitions

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

مثال:

هنگامی که عنصر DIV کلاس .ng-hide را دریافت می کند، transition , ثانیه طول می کشد و ارتفاع آن هم از ۱۰۰px به ۰ میرسد:

انیمیشن های css

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

مثال:

مثال:

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

 

برچسب ها

نوشته های مشابه

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

همچنین ببینید

بستن
بستن