ล่าสุดการพัฒนาเว็บบทเรียน
 

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 การเคลื่อนไหว:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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 นิเมชั่นการศึกษาของเรา CSS การเปลี่ยนการสอน ของเราและ CSS นิเมชั่นสอน

CSS Transitions

เปลี่ยน 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 ภาพเคลื่อนไหวช่วยให้คุณสามารถเปลี่ยนค่าทรัพย์สิน 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>
ลองตัวเอง»

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