การเขียนฟังก์ชัน Transition กำหนดเอง
ส่งคืนฟังก์ชัน CSS หรือ tick จาก transition กำหนดเองเพื่อทำให้ DOM เข้าหรือออกเคลื่อนไหว
การเขียนฟังก์ชัน Transition กำหนดเอง เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
ทรานซิชันแบบกำหนดเอง
นอกเหนือจากสิ่งที่มีมาให้แล้ว คุณสามารถเขียนฟังก์ชันทรานซิชันแบบกำหนดเองได้อย่างเต็มรูปแบบ
รูปแบบลายเซ็นของฟังก์ชัน
ฟังก์ชันทรานซิชันรับค่า (node, params) และส่งคืนออบเจ็กต์ตัวเลือก
function spin(node) {
return {
duration: 600,
css: (t) => `transform: rotate(${t * 360}deg); opacity: ${t};`
};
}ใช้ทรานซิชันของคุณ
นำไปใช้ด้วย transition:spin กับองค์ประกอบใดก็ได้
ฟังก์ชัน CSS
ส่งคืนฟังก์ชัน css(t, u) โดย t เปลี่ยนจาก 0 ถึง 1 ส่วน u เปลี่ยนจาก 1 ถึง 0
ฟังก์ชัน JS (ติ๊ก)
สำหรับค่าที่ CSS ทำแอนิเมชันไม่ได้ ให้ส่งคืนฟังก์ชัน tick แทน
tick: (t) => node.textContent = Math.floor(t * 100) + "%";ควรใช้ CSS หรือ ติ๊ก เมื่อใด
CSS ทำงานได้เร็วกว่าเนื่องจากเร่งด้วย GPU ควรใช้ติ๊กเฉพาะเมื่อ CSS ไม่สามารถแสดงการเปลี่ยนแปลงนั้นได้
การปรับความเร่ง
ใช้การปรับความเร่งภายในฟังก์ชันของคุณ หรือรับค่าเป็นพารามิเตอร์
ความหน่วงและระยะเวลา
ส่งคืน delay และ duration ในออบเจ็กต์ตัวเลือก
คลังที่นำกลับมาใช้ซ้ำได้
สร้างมอดูลทรานซิชันสำหรับระบบการออกแบบของคุณ
การรับรู้ทิศทาง
เฟรมเวิร์กจะเรียกฟังก์ชันของคุณเมื่อองค์ประกอบปรากฏ และใช้ทิศทางตรงข้ามเมื่อองค์ประกอบหายไป
รวมกับ in/out
คุณสามารถใช้ฟังก์ชันแบบกำหนดเองหนึ่งรายการสำหรับการปรากฏ และอีกรายการสำหรับการหายไป ผ่าน in: และ out:
ตรวจสอบอย่างรวดเร็ว
ฟังก์ชัน css ในทรานซิชันรับค่าอะไร
สรุปทบทวน
กำหนดทรานซิชันแบบกำหนดเองโดยส่งคืน { duration, css } หรือ { duration, tick } จากฟังก์ชัน
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 41
- บทเรียน
- 163
คำถามที่พบบ่อย
บทเรียน “การเขียนฟังก์ชัน Transition กำหนดเอง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การเขียนฟังก์ชัน Transition กำหนดเอง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การเขียนฟังก์ชัน Transition กำหนดเอง”
ส่งคืนฟังก์ชัน CSS หรือ tick จาก transition กำหนดเองเพื่อทำให้ DOM เข้าหรือออกเคลื่อนไหว คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การเขียนฟังก์ชัน Transition กำหนดเอง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การเขียนฟังก์ชัน Transition กำหนดเอง
- พารามิเตอร์ Transition: node duration delay
- การสร้าง Transition แบบแปรรูป
- Transition แบบ CSS กับ JS