แอนิเมชันตอนเข้าและออก
สร้างแอนิเมชันให้กับองค์ประกอบขณะเข้าหรือออก
แอนิเมชันตอนเข้าและออก เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
การสร้างภาพเคลื่อนไหวเมื่อมีหรือไม่มีองค์ประกอบ
บ่อยครั้งคุณต้องการให้องค์ประกอบสร้างภาพเคลื่อนไหวขณะปรากฏหรือหายไป เช่น เมื่อเพิ่มหรือลบรายการจากรายการ Angular มีนามแฝง :enter และ :leave สำหรับกรณีนี้
void และการมีอยู่ขององค์ประกอบ
องค์ประกอบที่ไม่ได้อยู่ใน DOM จะอยู่ในสถานะ void การเข้าสู่หน้าคือ void => * และการออกจากหน้าคือ * => void
นามแฝง :enter
:enter เป็นรูปแบบย่อของ void => * ใช้เพื่อสร้างภาพเคลื่อนไหวขณะเพิ่มองค์ประกอบ
transition(':enter', [
style({ opacity: 0 }),
animate('300ms', style({ opacity: 1 }))
])นามแฝง :leave
:leave เป็นรูปแบบย่อของ * => void Angular จะคงองค์ประกอบไว้ใน DOM จนกว่าภาพเคลื่อนไหวตอนออกจะเสร็จสิ้น
transition(':leave', [
animate('300ms', style({ opacity: 0 }))
])การกระตุ้นด้วยโฟลว์ควบคุม
ใช้ทริกเกอร์กับองค์ประกอบที่จัดการโดย @if หรือ @for การเพิ่มหรือลบองค์ประกอบจะเรียกภาพเคลื่อนไหวเมื่อเข้าและออก
@if (visible()) {
<div [@fade]>Hello</div>
}ทริกเกอร์การจาง
นี่คือตัวอย่างทริกเกอร์จางเข้าและจางออกที่นำกลับมาใช้ซ้ำได้
trigger('fade', [
transition(':enter', [
style({ opacity: 0 }),
animate('200ms', style({ opacity: 1 }))
]),
transition(':leave', [
animate('200ms', style({ opacity: 0 }))
])
])ตัวอย่างการเลื่อนเข้า
ใช้ transform และความทึบแสงร่วมกันเพื่อสร้างเอฟเฟกต์เลื่อนเข้าขณะองค์ประกอบเข้าสู่หน้า
transition(':enter', [
style({ transform: 'translateY(-10px)', opacity: 0 }),
animate('250ms ease-out',
style({ transform: 'translateY(0)', opacity: 1 }))
])ภาพเคลื่อนไหวของรายการ
วางทริกเกอร์ไว้บนแต่ละรายการภายใน @for การเพิ่มหรือลบรายการจะสร้างภาพเคลื่อนไหวให้แต่ละรายการอย่างเป็นอิสระ
@for (item of items(); track item.id) {
<li [@fade]>{{ item.name }}</li>
}เหตุใดการออกจึงต้องใช้กลไก
โดยปกติองค์ประกอบที่ถูกลบจะหายไปทันที กลไกภาพเคลื่อนไหวจะดักการลบ เก็บโหนดไว้ เรียกภาพเคลื่อนไหว :leave แล้วจึงลบออก ทั้งหมดนี้ทำโดยอัตโนมัติ
การปิดใช้ภาพเคลื่อนไหว
ผูก @.disabled เพื่อข้ามภาพเคลื่อนไหวตามเงื่อนไข เหมาะสำหรับการตั้งค่าการลดการเคลื่อนไหวหรือการแสดงผลครั้งแรก
<div [@.disabled]="prefersReducedMotion">...</div>แนวทางปฏิบัติที่ดี
ทำภาพเคลื่อนไหวตอนเข้าและออกให้สั้นและไม่รบกวนสายตา เคารพการตั้งค่า prefers-reduced-motion และสร้างภาพเคลื่อนไหวให้กับ transform กับความทึบแสง ซึ่งเป็นมิตรต่อ GPU แทนคุณสมบัติด้านการจัดวาง เพื่อให้การเคลื่อนไหวราบรื่น
ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจเกี่ยวกับแอนิเมชันเมื่อองค์ประกอบเข้ามาและออกไป
สรุปทบทวน
คุณได้เรียนรู้ว่า :enter (void => *) และ :leave (* => void) จะสร้างแอนิเมชันให้องค์ประกอบขณะที่องค์ประกอบถูกเพิ่มและนำออก โดยทำงานร่วมกับ @if/@for เอ็นจินจะเก็บโหนดที่กำลังออกไว้จนกว่าแอนิเมชันจะทำงานเสร็จ
คำถามที่พบบ่อย
บทเรียน “แอนิเมชันตอนเข้าและออก” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “แอนิเมชันตอนเข้าและออก” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “แอนิเมชันตอนเข้าและออก”
สร้างแอนิเมชันให้กับองค์ประกอบขณะเข้าหรือออก คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “แอนิเมชันตอนเข้าและออก” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พื้นฐานแอนิเมชัน: trigger และ state
- การเปลี่ยนผ่านและจังหวะเวลา
- แอนิเมชันตอนเข้าและออก
- คีย์เฟรมและการหน่วงลำดับ