در این مقاله نحوه متحرک سازی با آنگولار را آموزش خواهیم داد.
آنگولارجی اس امکان متحرک کردن با کمک CSS را دارا میباشد.
انیمیشن چیست؟
انیمیشن تغییر یک تگ HTML با جلوه حرکتی میباشد.
مثال:
با کلیک روی چک باکس تگ DIV مخفی میشود:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
مشاهده نتیجه
نرم افزار نباید پر از جلوه های متحرک باشد ، ولی انیمیشن میتواند به درک بهتر نرم افزار کمک کند.
به چه چیزی نیاز داریم؟
برای ساخت نرم افزاری با قابلیت متحرک سازی باید کتابخانه AngularJS Animate را نصب کنیم:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
حالا باید به ماژول ngAnimate در نرم افزار خود ارجاع دهید:
<body ng-app="ngAnimate">
اگر نرم افزار شما دارای یک اسم است. باید ngAnimate را بعنوان یک ماژول وابسته معرفی کنید:
<body ng-app="myApp">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
مشاهده نتیجه
ngAnimate چه کاری انجام میدهد:
ماژول ngAnimate تگ های HTML را متحرک نمی کند، اما هنگامیکه ngAnimate رخداد های مانند hide یا Show را در تگ HTML مشاهده می کند. به تگ کلاس های میدهد که به آن ظاهری متحرک میدهد.
دستورالعمل های که در آنگولار کلاس ها را اضافه و حذف می کنند عبارتند از :
ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
دستور العمل های ng-show و ng-hide مقدار کلاس ng-hide را اضافه و حذف می کنند.
بقیه دستورالعمل ها یک مقدار به کلاس ng-enter اضلافه می کنند و هنگام حذف از DOM یک صفت ng-leave را ایجاد می کنند.
دستور العمل 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
ما میتوانیم از transitions در CSS یا CSS Animations برای متحرک کردن تگ های HTML استفاده کنیم. ما در این آموزش از هردو تکنیک استفاده می کنیم.
در آموزش های مربوط به CSS میتوانید آموزش های متحرک سازی را مطالعه کنید.
CSS Transitions:
CSS transitions به شما امکان تغییر نرم از یک مقدار به مقدار دیگر را در زمان تعیین شده ای میدهد:
مثال:
وقتی که تگ DIV کلاس .ng-hide مقدار متحرک سازی 0.5 ثانیه را دریافت کرد، در این زمان ارتفاع از 100px به صفر پیکسل به آرامی تغییر می کند:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide {
height: 0;
}
</style>
مشاهده نتیجه
CSS Animations:
CSS Animations به شما اجازه میدهد که ویژگی های CSS را به آرامی تغییر دهید ، به این ترتیب در زمان مشخصی ویژگی تگ از مقداری به مقدار دیگر تغییر می کند.
مثال:
وقتیکه تگ DIV کلاس .ng-hide را دریافت می کند، متحرک سازی myChange اجرا میشود، و ارتفاع را از 100px به 0 به آرامی تغییر میدهد:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
مشاهده نتیجه
براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد