AngularJS อนิมาชั่น

ด้วยความช่วยเหลือของ CSS จะมีการเปลี่ยนแปลงอะนิเมชันจาก AngularJS:

อะนิเมชันคืออะไร?

อะนิเมชันคือการเปลี่ยนแปลงของ HTML element ที่ทำให้คุณมีความหวาดหวั่นว่ามันมีการเคลื่อนไหว:

ตัวอย่าง

เลือกตัวเลือกเพื่อซ่อน 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 Module:

<body ng-app="ngAnimate">

หรือ ถ้าแอปพลิเคชันของคุณมีชื่อ โปรดใส่ ngAnimate เพิ่มเป็น Dependency ของโมดูลในแอปพลิเคชัน:

ตัวอย่าง

<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 Module จะเพิ่มและลบคลาส

ngAnimate Module จะไม่ทำให้ Element HTML มี animation แต่เมื่อ ngAnimate ในขณะที่สังเกตเห็นเหตุการณ์บางอย่าง (เช่นการซ่อนหรือแสดง HTML Element) ตัวเลือกดังกล่าวจะได้รับคลาสที่ถูกกำหนดก่อนเพื่อใช้ทำ animation。

Directives ที่เพิ่มหรือลบคลาสใน AngularJS รวมถึง:

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

ng-show และ ng-hide Directives ที่เพิ่มหรือลบ ng-hide ค่าคลาส

Directives อื่นๆ จะเพิ่ม ng-enter ค่าคลาส และจะเพิ่ม ng-leave Properties

เมื่อ Element HTML มีการเปลี่ยนตัวตำแหน่งng-repeat Directives ยังจะเพิ่ม ng-move ค่าคลาส

นอกจากนี้ ในระหว่าง animation ระบบ HTML Element จะมีค่าคลาสกลุ่มหนึ่ง และจะถูกลบเมื่อ animation จบ ตัวอย่างเช่น:ng-hide ได้รับค่าคลาสเหล่านี้โดยใช้ Directives:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(ถ้าต้องการซ่อน Element)
  • ng-hide-remove(ถ้าต้องการแสดง Element)
  • ng-hide-add-active(ถ้าต้องการซ่อน Element)
  • ng-hide-remove-active(ถ้าต้องการแสดง Element)

การทำ animation ด้วย CSS

เราสามารถใช้ CSS Transition หรือ CSS Animation เพื่อเพิ่ม animation ให้กับ HTML Element โดยสรุป หลักสูตรนี้จะแสดงให้เห็นทั้งสองอย่าง。

เพื่อได้รับข้อมูลเกี่ยวกับ CSS Animation มากยิ่งขึ้น โปรดเรียนหลักสูตร CSS Transition และ CSS Animation ของเรา。

CSS Transition

CSS Transition อนุญาตให้คุณเปลี่ยนค่าของ CSS Property โดยที่มีการเปลี่ยนตัวเรียบร้อยในระยะเวลาที่กำหนดมาก่อน:

ตัวอย่าง

เมื่อ DIV อิเลเมนต์ได้รับ .ng-hide เมื่อมีการสลับสถานะ การเปลี่ยนแปลงจะใช้เวลา 0.5 วินาที ความสูงจะเปลี่ยนตัวเรียบร้อยจาก 100px ไปที่ 0:

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

ลองด้วยตัวเอง

CSS อนิมาชั่น

CSS อนิมาชั่น อนุญาตให้คุณเปลี่ยนค่าของ 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>

ลองด้วยตัวเอง