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

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

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

<body ng-app="ngAnimate">

Hide the DIV: <input type="checkbox" ng-model="myCheck">

<div ng-hide="myCheck"></div>

</body>

Hide the DIV: <input type="checkbox" ng-model="myCheck">

</body>

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

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

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

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

1	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>

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

<body ng-app="ngAnimate">

1	<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>

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-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 , ثانیه طول می کشد و ارتفاع آن هم از 100px به 0 میرسد:

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

<style>

div {

transition: all linear 0.5s;

background-color: lightblue;

height: 100px;

}

.ng-hide {

height: 0;

}

</style>

انیمیشن های css

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

مثال:

هنگامی که عنصر DIV کلاس “.ng-hide” می گیرد، animation 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>

<style>

@keyframes myChange {

from {

height: 100px;

} to {

height: 0;

}

div {

height: 100px;

background-color: lightblue;

}

div.ng-hide {

animation: 0.5s myChange;

}

</style>

5/5 - (3 امتیاز)

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

مطالب زیر را حتما مطالعه کنید

1 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ

مطالب زیر را حتما مطالعه کنید

مسیریابی انگولار AngularJS Routing

AngularJS Includes

api آنگولار جی اس – Angularjs API

اعتبارسنجی فرم ها با آنگولار – AngularJS Form Validation

ساخت form با آنگولار جی اس – angular forms

کار با event ها در آنگولار – AngularJS Events

1 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ