آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

انیمیشن AngularJS

دوره آموزشی AngularJS

کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.

انیمیشن AngularJS

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

هرگاه تغییر وضعیت در یک المان HTML صورت گیرد، این حالت را به اصطلاح انیمیشن می گویند.

مثال:تغییر وضعیت DIV با کلیک بر روی چک باکس به صورت زیر است.

سورس این برنامه به صورت رایگان در انتهای این مقاله در دسترس می باشد.

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

برای آماده کردن برنامه کاربردی خود به حالت انیمیشن، شما باید کتابخانه AngularJS Animate  را به قسمت head برنامه خود اضافه کنید.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>

سپس شما باید به ماژول ngAnimate متصل کنید.

<body ng-app="ngAnimate">

و یا اگر برنامه شما نام خاص دارد, ، می توانید ngAnimate را به طور وابسته به برنامه خود اضافه کنید:

سورس این برنامه به صورت رایگان در انتهای این مقاله در دسترس می باشد.

ngAnimate چه کاری انجام می دهد؟

این ماژول، کلاس هایی را اضافه و یا حذف می کند. ماژول ngAnimate المان های HTML شما را حرکت نمی دهد اما هرگاه ngAnimate رخداد خاصی را اعلان کند, به عنوان مثال محو یا ظاهر کردن یک المان HTML, المان چند کلاس پیش فرض را که می تواند انیمیشن تولید کند، را دریافت می کند. در زیر Directive هایی که مسئول اضافه و حذف کلاس ها در AngularJS هستند معرفی می گردند:

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

ng-show و ng-hide مقدار کلاس ng-hide را اضافه یا حذف می کند.

دایرکتیو های دیگر در هنگام بالا آمدن DOM کلاس ng-enter و یک اتربیوت ng-leave  هنگام حذف از DOM، را مقدار می دهد.

همچنین دایرکتیو ng-repeat مقدار کلاس ng-move را زمانی که المان HTML تغییر مکان می دهد اضافه می کند.به علاوه, در هنگام اجرای انیمیشن المان HTML,یک سری از کلاس ها را مقداردهی می کند و هرگاه اجرای انیمیشن به پایان رسید، آنها را حذف می کند.

  • ng-animate
  • ng-hide-animate
  • ng-hide-add (المان مخفی خواهد شد)
  • ng-hide-remove (المان نشان داده خواهد شد)
  • ng-hide-add-active (المان مخفی خواهد شد)
  • ng-hide-remove-active(المان نشان داده خواهد شد)

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

ما می توانیم از خاصیت انتقال(Transition)Css  و خاصیت انیمیشن Css(Animation)  ها برای متحرک سازی المان های HTML استفاده کنیم.در این مقاله این روش به شما آموزش داده می شود.

خاصیت انتقال CSS (Transition)  ها

این خاصیت CSS  ها تغییر ویژگی CSS را به راحتی با تغییر مقدار و مقداردهی زمانی به شما می دهد.

مثال : وقتی یک DIV، کلاس .ng-hide می گیرد,در 0.5 ثانیه ارتفاع از px100 به 0 می رسد:

سورس این برنامه به صورت رایگان در انتهای این مقاله در دسترس می باشد.

خاصیت Animation CSS ها

خاصیت CSS  ها تغییر ویژگی CSS را به راحتی با تغییر مقدار و مقداردهی زمانی به شما می دهد.

مثال: وقتی یک DIV کلاس .ng-hide می گیرد, انیمیشن myChange اجرا می شود و به آرامی ارتفاع از 100px تا 0 تغییر می کند:

سورس این برنامه به صورت رایگان در انتهای این مقاله در دسترس می باشد.

 

  • 861
  •    1112
  • تاریخ ارسال :   1394/12/20

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .