AngularJS animatsiyalar
AngularJS CSS yordamida animatsiyali o‘tishlarni taqdim etadi.
Animatsiya nima?
Animatsiya — bu HTML elementining o‘zgarishi sizda harakat illyuziyasini uyg‘otishi.
Misol:
DIV’ni yashirish uchun checkbox’ni belgilang:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
O‘zingiz sinab ko‘ring »
Ilovalar animatsiyalar bilan to‘ldirib yuborilmasligi kerak, ammo ba’zi animatsiyalar ilovani tushunishni osonlashtirishi mumkin.
Menga nima kerak?
Ilovalaringizni animatsiyalarga tayyorlash uchun AngularJS Animate kutubxonasini qo‘shishingiz kerak:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
So‘ngra ilovangizda ngAnimate moduliga murojaat qilishingiz kerak:
<body ng-app="ngAnimate">
Yoki ilovangizning nomi bo‘lsa, ilova modulingizga ngAnimate’ni bog‘liqlik (dependency) sifatida qo‘shing:
Misol
<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>
O‘zingiz sinab ko‘ring »
ngAnimate nima qiladi?
ngAnimate moduli klasslarni qo‘shadi va olib tashlaydi.
ngAnimate moduli HTML elementlaringizni animatsiya qilmaydi, ammo ngAnimate HTML elementini yashirish yoki ko‘rsatish kabi ma’lum hodisalarni sezganda, element animatsiyalar yaratish uchun ishlatilishi mumkin bo‘lgan oldindan belgilangan klasslarni oladi.
AngularJS’da klasslarni qo‘shadigan/olib tashlaydigan direktivalar:
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
ng-show va ng-hide direktivalari ng-hide klass qiymatini qo‘shadi yoki olib tashlaydi.
Boshqa direktivalar DOM’ga kirganda ng-enter klass qiymatini, DOM’dan olib tashlanganda esa ng-leave atributini qo‘shadi.
ng-repeat direktivasi, shuningdek, HTML elementi o‘rnini o‘zgartirganda ng-move klass qiymatini qo‘shadi.
Bundan tashqari, animatsiya davomida HTML elementi bir qator klass qiymatlariga ega bo‘ladi, ular animatsiya tugagach olib tashlanadi.
Misol: ng-hide direktivasi quyidagi klass qiymatlarini qo‘shadi:
ng-animateng-hide-animateng-hide-add(agar element yashiriladigan bo‘lsa)ng-hide-remove(agar element ko‘rsatiladigan bo‘lsa)ng-hide-add-active(agar element yashiriladigan bo‘lsa)ng-hide-remove-active(agar element ko‘rsatiladigan bo‘lsa)
CSS yordamida animatsiyalar
HTML elementlarini animatsiya qilish uchun CSS o‘tishlari (transitions) yoki CSS animatsiyalaridan foydalanishimiz mumkin.
Ushbu darslik sizga ikkalasini ham ko‘rsatadi.
CSS animatsiyasi haqida ko‘proq bilish uchun CSS o‘tishlari darsligimizni va CSS animatsiyalari darsligimizni o‘rganing.
CSS o‘tishlari (transitions)
CSS o‘tishlari CSS xususiyatlari qiymatlarini berilgan vaqt davomida bir qiymatdan boshqasiga silliq o‘zgartirish imkonini beradi:
Misol:
DIV elementi .ng-hide klassini olganda o‘tish 0.5 soniya davom etadi va balandlik 100px’dan 0 gacha silliq o‘zgaradi:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide {
height: 0;
}
</style>
O‘zingiz sinab ko‘ring »
CSS animatsiyalari
CSS animatsiyalari CSS xususiyatlari qiymatlarini berilgan vaqt davomida bir qiymatdan boshqasiga silliq o‘zgartirish imkonini beradi:
Misol:
DIV elementi .ng-hide klassini olganda myChange animatsiyasi ishga tushadi va u balandlikni 100px’dan 0 gacha silliq o‘zgartiradi:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!