AngularJS အန်နီမေးရှင်းများ
AngularJS သည် CSS ၏အကူအညီဖြင့် ကာတွန်းအသွင်ကူးပြောင်းမှုများကို ပံ့ပိုးပေးသည်။
Animation ဆိုတာ ဘာလဲ။
အန်နီမေးရှင်းတစ်ခုသည် 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.9/angular-animate.js"></script>
ngAnimateထို့နောက် သင့်လျှောက်လွှာရှိ module ကို ကိုးကားရပါမည် -
<body ng-app="ngAnimate">
သို့မဟုတ် သင့်အပလီကေးရှင်းတွင် နာမည်တစ်ခုရှိပါက၊ ngAnimateသင့်လျှောက်လွှာ module တွင် မှီခိုမှုအဖြစ် ထည့်ပါ-
ဥပမာ
<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 module သည် အတန်းများကို ပေါင်းထည့်ကာ ဖယ်ရှားသည်။
ngAnimate module သည် သင်၏ HTML ဒြပ်စင်များကို လှုပ်ရှားသက်ဝင်စေခြင်းမရှိသော်လည်း ngAnimate သည် HTML ဒြပ်စင်တစ်ခုအား ဝှက်ထားရန် သို့မဟုတ် ပြသခြင်းကဲ့သို့သော အချို့သောဖြစ်ရပ်များကို သတိပြုမိသောအခါ၊ ဒြပ်စင်သည် ကာတွန်းဖန်တီးရန်အတွက် အသုံးပြုနိုင်သည့် ကြိုတင်သတ်မှတ်ထားသော အတန်းအချို့ကို ရရှိမည်ဖြစ်သည်။
AngularJS တွင် အတန်းများထည့်/ဖယ်ရှားသည့် ညွှန်ကြားချက်များမှာ-
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
ng-showနှင့် ညွှန်ကြားချက် များသည် အတန်းတန်ဖိုးကို ng-hideပေါင်းထည့် သို့မဟုတ် ဖယ်ရှားသည် ။ng-hide
အခြားသော ညွှန်ကြားချက် ng-enterများသည် DOM ထဲသို့ ဝင်ရောက်သောအခါ အတန်းတန်ဖိုးတစ်ခုနှင့် ng-leave၎င်းတို့ကို DOM မှ ဖယ်ရှားလိုက်သောအခါတွင် ရည်ညွှန်းချက်တစ်ခု ပေါင်းထည့်သည်။
HTML ဒြပ်စင် အနေအထားကို ပြောင်းလဲသောအခါ ng-repeatလမ်းညွှန်ချက်သည် အတန်းတန်ဖိုးကိုလည်း ပေါင်းထည့်သည် ။ng-move
ထို့အပြင်၊ ကာတွန်းရိုက်ကူး နေစဉ်အတွင်း ၊ HTML အစိတ်အပိုင်းသည် ကာတွန်းရုပ်ပြမှုပြီးသွားသောအခါတွင် ဖယ်ရှားပစ်မည့် အတန်းတန်ဖိုးများအစုတစ်ခုပါရှိသည်။ ဥပမာ-
ng-hideညွှန်ကြားချက်သည် ဤအတန်းတန်ဖိုးများကို ပေါင်းထည့်လိမ့်မည်-
ng-animateng-hide-animateng-hide-add(ဒြပ်စင်ကိုဝှက်ထားမည်ဆိုပါက)ng-hide-remove(ဒြပ်စင်ပြမည်ဆိုပါက)ng-hide-add-active(ဒြပ်စင်ကိုဝှက်ထားမည်ဆိုပါက)ng-hide-remove-active(ဒြပ်စင်ပြမည်ဆိုပါက)
CSS ကိုအသုံးပြုထားသော Animation
HTML ဒြပ်စင်များကို သက်ဝင်လှုပ်ရှားရန် CSS အသွင်ကူးပြောင်းမှုများ သို့မဟုတ် CSS ကာတွန်းများကို ကျွန်ုပ်တို့ အသုံးပြုနိုင်သည်။ ဒီသင်ခန်းစာက နှစ်ခုလုံးကို ပြပေးပါလိမ့်မယ်။
CSS Animation အကြောင်းပိုမိုလေ့လာရန်၊ ကျွန်ုပ်တို့၏ CSS Transition Tutorial နှင့် CSS Animation Tutorial ကို လေ့လာ ပါ။
CSS အသွင်ကူးပြောင်းမှုများ
CSS ကူးပြောင်းမှုများသည် သင့်အား CSS ပိုင်ဆိုင်မှုတန်ဖိုးများကို သတ်မှတ်ကာလတစ်ခုအတွင်း၊ တန်ဖိုးတစ်ခုမှ အခြားတစ်ခုသို့ ချောမွေ့စွာပြောင်းလဲနိုင်စေသည်-
ဥပမာ-
DIV ဒြပ်စင်သည် .ng-hideအတန်းကိုရရှိသောအခါ၊ ကူးပြောင်းမှုသည် 0.5 စက္ကန့်ကြာမည်ဖြစ်ပြီး အမြင့်သည် 100px မှ 0 သို့ ချောမွေ့စွာပြောင်းလဲသွားလိမ့်မည်-
<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>