انیمیشن‌های AngularJS

با کمک CSS، AngularJS انتقال‌های انیمیشنی را ارائه می‌دهد.

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

انیمیشن به تغییرات HTML عناصر اشاره دارد که به شما احساس حرکت می‌دهد.

مثال

برای مخفی کردن DIV، گزینه چک را انتخاب کنید:

<body ng-app="ngAnimate">
DIV مخفی کردن：<input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>

آزمایش کنید

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

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

برای آماده‌سازی برنامه خود برای انیمیشن، باید کتابخانه AngularJS Animate را شامل شوید:

<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>نمایش 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 عناصر) توجه می‌کنید، این عنصر برخی از کلاس‌های پیش‌تعریف شده را دریافت خواهد کرد که می‌توان از آن‌ها برای ایجاد انیمیشن استفاده کرد.

دستورالعمل‌های اضافه/حذف کلاس در 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-enter کلاس‌ها را اضافه کرده و در حالی که از DOM حذف می‌شود، ng-leave ویژگی.

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

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

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(برای مخفی کردن عنصر)
  • ng-hide-remove(برای نمایش عنصر)
  • ng-hide-add-active(برای مخفی کردن عنصر)
  • ng-hide-remove-active(برای نمایش عنصر)

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

ما می‌توانیم از CSS过渡 یا CSS انیمیشن برای افزودن انیمیشن به عناصر HTML استفاده کنیم. این آموزش به شما این دو را نشان خواهد داد.

برای اطلاعات بیشتر در مورد CSS انیمیشن، لطفاً از آموزش‌های CSS过渡 و CSS انیمیشن ما استفاده کنید.

过渡 CSS

过渡 CSS به شما اجازه می‌دهد که در مدت زمان مشخصی، مقدار یک ویژگی CSS را به طور نرم و آرام به مقدار دیگری تغییر دهید:

مثال

وقتی عنصر DIV به دست می‌آید .ng-hide در زمان انتقال، مدت زمان انتقال 0.5 ثانیه خواهد بود و ارتفاع از 100px به 0 به صورت نرم و آرام تغییر خواهد کرد:

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

آزمایش کنید

آنی‌میشن‌های CSS

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

مثال

وقتی عنصر DIV به دست می‌آید .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>

آزمایش کنید