ການສະແດງ 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 ມູນນິທິຈະບໍ່ສະແດງ Animation HTML Element, ແຕ່ເມື່ອ ngAnimate ສຳລັບການສັງເກດຂອງບາງເຫດການ (ເຊັ່ນ: HTML Element ປິດຫຼືສະແດງ) ສິ່ງຈະຮັບຄູ່ມະນາດທີ່ກໍານົດກ່ອນ, ເຊິ່ງສາມາດນຳໃຊ້ສຳລັບ Animation.

ຄຳສັ່ງເພີ່ມ/ລົບມະນາດໃນ 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 Element ປ່ຽນທີ່ຕັ້ງລະບຽບ:ng-repeat ຄຳສັ່ງຈະເພີ່ມ: ng-move ຄູ່ມະນາດ.

ພາຍໃນຂະບວນການ Animation, HTML Element ຈະມີຄູ່ມະນາດຫຼາຍອັນ, ເຊິ່ງຈະຖືກລົບຫຼັງຈາກ Animation ສິ້ນສຸດ. ເອງວ່າ:ng-hide ຄຳສັ່ງຈະເພີ່ມຄູ່ມະນາດນີ້:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(ຖ້າຈະປິດສິ່ງ)
  • ng-hide-remove(ຖ້າຈະສະແດງສິ່ງ)
  • ng-hide-add-active(ຖ້າຈະປິດສິ່ງ)
  • ng-hide-remove-active(ຖ້າຈະສະແດງສິ່ງ)

ການດໍາເນີນ Animation ທາງ CSS

ພວກເຮົາສາມາດນຳໃຊ້ CSS Transition ຫຼື CSS Animation ເພື່ອສະແດງການສະແດງ Animation HTML Element. ການຮຽນນີ້ຈະສະແດງທັງສອງບົດສະຫຼຸບນີ້.

ສຳລັບການຮຽນຫຼາຍກ່ຽວກັບ CSS Animation, ຂໍ້ສະເໜີທາງຂອງພວກເຮົາ CSS Transition ແລະ CSS Animation.

CSS Transition

CSS Transition ອະນຸຍາດໃຫ້ທ່ານປ່ຽນລະບຽບບັນດາມະນາດ CSS ທີ່ຫຼີ້ນຫຼີ້ນໃນໄລຍະທີ່ກຳນັດໄວ້:

ອະດີດ

ເມື່ອ DIV ສະຖານທີ່ .ng-hide ການຍ້າຍລະບຽບຈະສືບຕໍ່ 0.5 ວິນາທີ ຄວາມສູງຈະປ່ຽນມາ 0:100px ທາງທີ່ຫຼີ້ນຫຼີ້ນ

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

ທົດລອງດີຕະຫຼອດ

CSS animation

CSS animation ອານວຍຄວາມສະໝັກການປ່ຽນຫຼັງການຍ່ອຍການວັດສະດຸທາງ 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>

ທົດລອງດີຕະຫຼອດ