พารามิเตอร์ Transition: node duration delay
รับโหนดและออบเจ็กต์พารามิเตอร์ในฟังก์ชัน transition เพื่อความยืดหยุ่น
พารามิเตอร์ Transition: node duration delay เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
รูปแบบลายเซ็นของฟังก์ชัน
ทรานซิชันแบบกำหนดเองรับค่า (node, params) เพื่อความยืดหยุ่น
อ่านค่าโหนด
ใช้โหนดเพื่อคำนวณคุณสมบัติ เช่น ขนาดหรือตำแหน่งปัจจุบัน
const rect = node.getBoundingClientRect();ส่งพารามิเตอร์
ผู้ใช้คำสั่งจะส่งพารามิเตอร์มาพร้อมกับคำสั่ง
<p transition:spin={{ duration: 800 }}>...ค่าเริ่มต้น
จัดการกรณีที่ไม่มีพารามิเตอร์ด้วยค่าเริ่มต้นภายในฟังก์ชัน
function spin(node, { duration = 600 } = {}) { ... }พารามิเตอร์แบบตอบสนอง
การเปลี่ยนแปลงพารามิเตอร์จะไม่เริ่มทรานซิชันที่กำลังทำงานอยู่ใหม่ การเมาต์ครั้งถัดไปจะใช้ค่าใหม่
ระยะเวลาที่คำนวณได้
คุณสามารถคำนวณระยะเวลาจากข้อมูลได้ เช่น ใช้ความยาวของคำสำหรับเอฟเฟกต์การพิมพ์ทีละตัวอักษร
พารามิเตอร์การปรับความเร่ง
รับพารามิเตอร์การปรับความเร่ง เพื่อให้ผู้ใช้ปรับแต่งเส้นโค้งได้
พารามิเตอร์ความหน่วง
ทำให้รายการปรากฏเหลื่อมกันโดยส่งค่าความหน่วงที่คำนวณจากดัชนี
{#each items as item, i}
<p transition:fly={{ delay: i * 50 }}>{item}</p>
{/each}เคล็ดลับสตริง CSS
ส่งคืนทรานส์ฟอร์มที่นำมาประกอบกันได้ และหลีกเลี่ยงคุณสมบัติที่ทำให้เลย์เอาต์คำนวณซ้ำ เช่น top และ left
ประสิทธิภาพ
ใช้ transform และ opacity เป็นหลัก เพื่อให้แอนิเมชันลื่นไหลเป็นพิเศษ
การทดสอบ
ตรวจสอบสไตล์ที่คำนวณแล้วระหว่างทรานซิชันด้วย DevTools ของเบราว์เซอร์
ตรวจสอบอย่างรวดเร็ว
ออบเจ็กต์ params มีข้อมูลอะไรให้ใช้
สรุปทบทวน
รับและใช้ params เพื่อสร้างทรานซิชันที่ยืดหยุ่น และกำหนดค่าเริ่มต้นสำหรับค่าที่ไม่มี
คำถามที่พบบ่อย
บทเรียน “พารามิเตอร์ Transition: node duration delay” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “พารามิเตอร์ Transition: node duration delay” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “พารามิเตอร์ Transition: node duration delay”
รับโหนดและออบเจ็กต์พารามิเตอร์ในฟังก์ชัน transition เพื่อความยืดหยุ่น คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “พารามิเตอร์ Transition: node duration delay” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การเขียนฟังก์ชัน Transition กำหนดเอง
- พารามิเตอร์ Transition: node duration delay
- การสร้าง Transition แบบแปรรูป
- Transition แบบ CSS กับ JS