آنگولار جی اس اینیمیشن

سی ایس ایس کی مدد سے، انگولار جی آنیمیشن ٹرانزیشن فراہم کرتا ہے。

آنیمیشن کیا ہے؟

آنیمیشن، یعنی ایچ تی ایم ال عناصر کی تبدیلی، آپ کو ایک موشن کی وهم آوری دیتا ہے。

مثال

چیک باکس کو تیک کرکے DIV کو پوش دیں:

<body ng-app="ngAnimate">
DIV کو پوشینا: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>

نو خود کوشا

ایپلیکیشن میں آنیمیشن بھر نہیں چاہئیں، لیکن کچھ آنیمیشن ایپلیکیشن کو بہتر سمجھنے میں مدد دیتا ہے。

مجھے کیا چاہئیے؟

کے لئے اپنے ایپلیکیشن کو آنیمیشن کیلئے تیار رکھنے کیلئے، آپ کو انگولار جی انیمیشن لیبری کا شامل کرنا ہوگا:

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-animate.js"></script>

پس، آپ کو اس کا استعمال کرنا چاہئے ngAnimate مودول:

<body ng-app="ngAnimate">

یا اگر آپ کا ایپلیکیشن کا نام رکھا ہوا ہے، تو ngAnimate پیشکش کیوں کے خواہش ہو، اس کی کسی مودول کی ویلو کو دکھائیں گا:

مثال

<body ng-app="myApp">
<h1>پوشا دیویں: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
وار app = angular.module('myApp', ['ngAnimate']);
</script>

نو خود کوشا

ngAnimate کی کارکردگی کیا ہے؟

ngAnimate مودول کیسی کی ویلو کو اضافہ یا حذف کرتا ہے

ngAnimate مودول آپ کا ایچ تی ایم ایل عناصر کو انیمیشن نہیں بناتا، لیکن جب ngAnimate آئیڈیکٹوں کی کسی خاص واقعے (مثلاً ایچ تی ایم ایل عناصر کا پوشنا یا دکھانا) کی نشاندہی کی جب، وہ عناصر کی کچھ مپرکھی کی ویلو حاصل کرتے ہیں، جو انیمیشن بنانے کیلئے استعمال کی جاسکتی ہیں۔

آنجولر جی ایس میں کیسی کی ویلو کو اضافہ یا حذف کرنے والی آئیڈیکٹوں میں شامل ہیں:

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

ng-show اور ng-hide آئیڈیکٹوں کو اضافہ یا حذف ng-hide ویلو کا نام۔

دیگر آئیڈیکٹوں کی مدد سے، ایچ تی ایم ایل میں داخل ہونے کے وقت دکھائیں گا ng-enter ویلو کا نام، اور ایچ تی ایم ایل سے باہر نکالنے کے وقت ویلو کو دکھائیں گا ng-leave ویلو.

جب ایچ تی ایم ایل عناصر کا مقام تبدیل ہوگا،ng-repeat آئیڈیکٹ میں اضافہ کرنے والی آئیڈیکٹوں میں: ng-move ویلو کا نام۔

اس کے علاوہ، انیمیشن کے دوران، ایچ تی ایم ایل عناصر کی ویلو کا ایک گروپ رکھا جائے گا، جسے انیمیشن مکمل ہونے کے بعد حذف کیا جائے گا۔ مثلاً:ng-hide آئیڈیکٹ میں ان کی ویلو اضافہ کرنے والی آئیڈیکٹوں کو دکھائیں گا:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(اگر عناصر کو پوشانے کی خواہش ہو)
  • ng-hide-remove(اگر عناصر کو دکھانے کی خواہش ہو)
  • ng-hide-add-active(اگر عناصر کو پوشانے کی خواہش ہو)
  • ng-hide-remove-active(اگر عناصر کو دکھانے کی خواہش ہو)

سی ایس ایس کے ذریعے انیمیشن

آپ سی ایس ایس تبدیلی یا سی ایس ایس انیمیشن کا استعمال کرسکتے ہیں تاکہ ایچ تی ایم ایل عناصر کو انیمیشن دیتے ہیں۔ اس تعلیمی پروگرام میں میں ان دونوں کو دکھائیں گا۔

آپ کسی سی ایس ایس انیمیشن کے بارے میں مزید معلومات حاصل کرنے کیلئے، ہمارے سی ایس ایس تبدیلی اور سی ایس ایس انیمیشن تعلیمی پروگراموں کو پڑھیں۔

CSS تبدیلی

CSS تبدیلی دے سکتی ہے کہ آپ کسی طویل مدت کے دوران، کسی سی ایس ایس پرپرتی کا ویلو سماوت سے ایک ویلو سے دوسرے ویلو پر تبدیل کرسکتی ہے:

مثال

جب ڈی وی علامت حاصل کرتی ہے .ng-hide جب کسی کا تابع چل رہا ہے، تبدیلی کا عرصہ 0.5 سیکنڈ رہے گا، اونچائی 100px سے سمت چپ سمت 0 پونچ میں سماوت سے تبدیل ہوگی:

@keyframes myChange {
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}
.ng-hide {
  height: 0;
}
</style>

نو خود کوشا

سی ایس ایس انیمیشن

سی ایس ایس انیمیشن آپ کی منتخب مدت کے اندر ایک سی ایس ایس پراپریٹی کا اصل کا قیمتی اور سخت کی جانے والی تبدیلی کی اجازت دیتا ہے:

مثال

جب ڈی وی علامت حاصل کرتی ہے .ng-hide <style>

@keyframes myChange {
from {
  to {
    height: 100px;
  }
    height: 0;
  }
}
div {
  height: 100px;
  background-color: lightblue;
}
div.ng-hide {
  animation: 0.5s myChange;
}
</style>

نو خود کوشا