HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

แอนิเมชั่น AngularJS

❮ ก่อนหน้า ถัดไป ❯

AngularJS ให้การเปลี่ยนภาพเคลื่อนไหวด้วยความช่วยเหลือจาก CSS

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

แอนิเมชั่นเกิดขึ้นเมื่อการแปลงองค์ประกอบ 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โมดูลในใบสมัครของคุณ:

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

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ค่าคลาส

คำสั่งอื่นๆ เพิ่มng-enterค่าคลาสเมื่อเข้าสู่ DOM และng-leaveแอตทริบิวต์เมื่อถูกลบออกจาก DOM

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

นอกจากนี้ในระหว่างแอนิเมชัน องค์ประกอบ HTML จะมีชุดของค่าคลาส ซึ่งจะถูกลบออกเมื่อแอนิเมชั่นเสร็จสิ้น ตัวอย่าง: ng-hideคำสั่งจะเพิ่มค่าคลาสเหล่านี้:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add (หากองค์ประกอบจะถูกซ่อนไว้)
  • ng-hide-remove (ถ้าองค์ประกอบจะแสดง)
  • ng-hide-add-active (หากองค์ประกอบจะถูกซ่อนไว้)
  • ng-hide-remove-active (ถ้าองค์ประกอบจะแสดง)

แอนิเมชั่นโดยใช้ CSS

เราสามารถใช้การเปลี่ยน CSS หรือภาพเคลื่อนไหว CSS เพื่อทำให้องค์ประกอบ HTML เคลื่อนไหวได้ บทช่วยสอนนี้จะแสดงให้คุณเห็นทั้งคู่

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ 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

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>

❮ ก่อนหน้า ถัดไป ❯