Latest web development tutorials

AngularJS นิเมชั่น

AngularJS ให้ภาพเคลื่อนไหวที่คุณสามารถใช้กับ CSS

ภาพเคลื่อนไหว AngularJS ต้องแนะนำเชิงมุม-animate.min.js ห้องสมุด 

<script src="http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

มันควรจะใช้ในรูปแบบแอปพลิเค ngAnimate: 

<body ng-app="ngAnimate">

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

นิเมชั่นคือผลแบบไดนามิกโดยการเปลี่ยนองค์ประกอบ HTML ผลิต

ตัวอย่าง

เลือกช่องทำเครื่องหมายเพื่อซ่อน DIV:

<body NG-App = "ngAnimate ">

ซ่อน DIV: <input type = "ช่องทำเครื่องหมาย " NG-รุ่น = "myCheck">

<div NG-ซ่อน = "myCheck "> </ div>

</ body>

ลอง»
หมายเหตุ การใช้งานแอนิเมชั่ไม่มากเกินไป แต่การใช้ที่เหมาะสมของภาพเคลื่อนไหวที่สามารถเพิ่มความมีชีวิตชีวาของหน้าหรือคุณสามารถอนุญาตให้ผู้ใช้เข้าใจได้ง่ายขึ้น

ถ้าเราใช้ชื่อของโปรแกรมประยุกต์ที่ได้รับการตั้งค่าที่คุณสามารถนำ ngAnimate เพิ่มโดยตรงในรูปแบบ:

ตัวอย่าง

<body NG-App = "แอปของฉัน ">

<h1> ซ่อน DIV: <input type = "ช่องทำเครื่องหมาย " NG-รุ่น = "myCheck"> </ h1>

<div NG-ซ่อน = "myCheck "> </ div>

<script>
แอปพลิเค var = angular.module ( 'MyApp' [ 'ngAnimate']);
</ script>

ลอง»

ngAnimate ทำ?

รุ่น ngAnimate สามารถเพิ่มหรือลบระดับ

รุ่น ngAnimate ไม่ได้ทำให้องค์ประกอบเคลื่อนไหว HTML แต่ 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 คุ้มค่าของการเรียน

คำแนะนำอื่น ๆ จะถูกเพิ่มเข้าไปใน DOM ng-enter ระดับลบ DOM จะเพิ่ม ng-leave สถานที่ให้บริการ

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

นอกจากนี้หลังจากเสร็จสิ้นการจัดเก็บชั้นเรียนขององค์ประกอบ 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 เปลี่ยนแปลงกวดวิชา , CSS นิเมชั่นกวดวิชา

CSS Transitions

CSS ช่วยให้เราราบรื่นไปมูลค่าทรัพย์สิน CSS เปลี่ยนไปยังอีก:

ตัวอย่าง

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

<style>
div {
การเปลี่ยนแปลง: All เชิงเส้น 0.5s;
สีพื้นหลัง: lightblue;
ความสูง: 100px;
}
.ng ซ่อน {
ความสูง: 0;
}
</ style>

ลอง»

CSS นิเมชั่น

CSS นิเมชั่นช่วยให้คุณสามารถปรับเปลี่ยนได้อย่างราบรื่นค่าทรัพย์สิน CSS:

ตัวอย่าง

ในส่วน div ชุด .ng-hide ชั้นเรียลไทม์, myChange นิเมชั่นจะถูกดำเนินการก็จะมีความสูงที่ราบรื่นจาก 100px 0:

<style>
@keyframes myChange {
จาก {
ความสูง: 100px;
} เป็น {
ความสูง: 0;
}
}
div {
ความสูง: 100px;
สีพื้นหลัง: lightblue;
}
div.ng ซ่อน {
ภาพเคลื่อนไหว: 0.5s myChange;
}
</ style>

ลอง»