การเปลี่ยนผ่านและจังหวะเวลา
สร้างแอนิเมชันระหว่างสถานะด้วยการเปลี่ยนผ่าน
การเปลี่ยนผ่านและจังหวะเวลา เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
การสร้างภาพเคลื่อนไหวระหว่างสถานะ
สถานะอธิบายว่าองค์ประกอบหยุดอยู่ที่ตำแหน่งใด ส่วนการเปลี่ยนผ่านอธิบายว่าองค์ประกอบเคลื่อนที่ระหว่างสถานะเหล่านั้นอย่างไร ฟังก์ชัน transition จะจับคู่การเปลี่ยนสถานะเข้ากับภาพเคลื่อนไหว
ฟังก์ชัน transition
transition รับนิพจน์การเปลี่ยนสถานะและขั้นตอนภาพเคลื่อนไหวตั้งแต่หนึ่งขั้นตอนขึ้นไป
transition('closed => open', animate('300ms'))ตัวดำเนินการระบุทิศทาง
ใช้ => สำหรับทิศทางเดียว และ <=> สำหรับทั้งสองทิศทาง
transition('open <=> closed', animate('250ms ease-in-out'))ฟังก์ชัน animate
animate กำหนดการจับเวลา ได้แก่ ระยะเวลา การหน่วงเวลาที่เลือกได้ และการผ่อนจังหวะ รูปแบบสตริงคือ "duration delay easing"
animate('500ms 100ms ease-out')หน่วยของระยะเวลา
ระยะเวลารับค่า ms หรือ s ตัวเลขที่ไม่มีหน่วยจะถือเป็นมิลลิวินาที
animate('0.4s')
animate('400ms')
animate(400)ฟังก์ชันการผ่อนจังหวะ
การผ่อนจังหวะควบคุมความเร่ง ได้แก่ linear, ease, ease-in, ease-out, ease-in-out หรือ cubic-bezier()
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)')รูปแบบเป้าหมายแบบระบุในบรรทัด
animate รับอาร์กิวเมนต์ style ตัวที่สองได้ เพื่อสร้างภาพเคลื่อนไหวไปยังรูปแบบที่ไม่ได้ผูกกับสถานะที่มีชื่อ
transition('* => active', [
animate('300ms', style({ transform: 'scale(1.1)' }))
])หลายขั้นตอน
ส่งอาร์เรย์ของขั้นตอนเพื่อเรียกลำดับการทำงานภายในการเปลี่ยนผ่านเดียว
transition('closed => open', [
style({ opacity: 0 }),
animate('300ms', style({ opacity: 1 }))
])การเปลี่ยนผ่านแบบไวลด์การ์ด
ใช้ * เพื่อจับคู่การเปลี่ยนผ่านจากหรือไปยังสถานะใดก็ได้ เหมาะสำหรับเอฟเฟกต์เมื่อเข้าแบบทั่วไป
transition('* => open', animate('200ms'))รูปแบบเริ่มต้น
style() ที่ไม่มีอาร์กิวเมนต์ก่อน animate() จะกำหนดจุดเริ่มต้น จากนั้น Angular จะสร้างภาพเคลื่อนไหวไปยังรูปแบบของสถานะปลายทาง
transition(':enter', [
style({ opacity: 0 }),
animate('400ms', style({ opacity: 1 }))
])แนวทางปฏิบัติที่ดีด้านการจับเวลา
ทำให้การเปลี่ยนผ่านของ UI สั้น (150-300 มิลลิวินาที) เพื่อให้ตอบสนองได้ดี ใช้ระยะเวลาที่ยาวขึ้นกับการเคลื่อนไหวขนาดใหญ่และตั้งใจออกแบบเท่านั้น และเลือกการผ่อนจังหวะให้เหมาะกับความรู้สึกที่ต้องการ
ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความเข้าใจของคุณเกี่ยวกับการเปลี่ยนผ่านและการจับเวลา
สรุปทบทวน
คุณได้เรียนรู้ว่า transition เชื่อมการเปลี่ยนสถานะ ซึ่งใช้ => หรือ <=> เข้ากับขั้นตอนของ animate สตริงการจับเวลาคือ ระยะเวลา การหน่วงเวลา การผ่อนจังหวะ และคุณสามารถเชื่อมขั้นตอน style/animate เพื่อสร้างลำดับได้
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 38
- บทเรียน
- 144
คำถามที่พบบ่อย
บทเรียน “การเปลี่ยนผ่านและจังหวะเวลา” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การเปลี่ยนผ่านและจังหวะเวลา” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การเปลี่ยนผ่านและจังหวะเวลา”
สร้างแอนิเมชันระหว่างสถานะด้วยการเปลี่ยนผ่าน คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การเปลี่ยนผ่านและจังหวะเวลา” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พื้นฐานแอนิเมชัน: trigger และ state
- การเปลี่ยนผ่านและจังหวะเวลา
- แอนิเมชันตอนเข้าและออก
- คีย์เฟรมและการหน่วงลำดับ