พารามิเตอร์การเปลี่ยนภาพ: duration delay easing
ปรับแต่งการเปลี่ยนภาพโดยส่งพารามิเตอร์ duration, delay และ easing
พารามิเตอร์การเปลี่ยนภาพ: duration delay easing เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
ออบเจ็กต์พารามิเตอร์
ทรานซิชันทั้งหมดรับออบเจ็กต์ตัวเลือกเป็นอาร์กิวเมนต์ตัวที่สอง
<p transition:fade={{ duration: 600, delay: 200 }}>ระยะเวลา
ความยาวทั้งหมดของภาพเคลื่อนไหวในหน่วยมิลลิวินาที ค่าเริ่มต้นคือ 400 มิลลิวินาที
การหน่วงเวลา
รอก่อนเริ่มภาพเคลื่อนไหว มีประโยชน์สำหรับส่วนติดต่อผู้ใช้ที่ทำงานต่อเนื่องเป็นลำดับ
การปรับจังหวะ
ฟังก์ชันที่แมปความคืบหน้าเชิงเส้นจาก 0 ถึง 1 ให้เป็นเส้นโค้งแบบกำหนดเอง ค่าเริ่มต้นคือแบบเชิงเส้น
ฟังก์ชันปรับจังหวะในตัว
นำเข้าจาก svelte/easing ได้แก่ linear, quadIn, cubicOut, elasticOut และอื่น ๆ
import { elasticOut } from "svelte/easing";ตัวเลือกเฉพาะทรานซิชัน
ทรานซิชันแต่ละรายการมีพารามิเตอร์ของตนเอง การเคลื่อนเข้าจะเพิ่ม x และ y ส่วนการย่อขยายจะเพิ่ม start
การเลือกระยะเวลา
ใช้ระยะเวลาสั้น 100–200 มิลลิวินาทีสำหรับการโต้ตอบขนาดเล็ก และระยะเวลานาน 400–700 มิลลิวินาทีสำหรับทรานซิชันระหว่างหน้า
พารามิเตอร์แบบรีแอกทีฟ
ค่าพารามิเตอร์สามารถขึ้นอยู่กับสถานะแบบรีแอกทีฟได้
<p transition:fly={{ x: dir * 200 }}>...ลักษณะการทำงานเริ่มต้น
หากไม่ระบุออบเจ็กต์พารามิเตอร์ ระบบจะใช้ค่าเริ่มต้นที่เหมาะสม
ให้เข้ากับการออกแบบ
ปรับระยะเวลาและการปรับจังหวะจนกว่าการเคลื่อนไหวจะดูเหมาะสม แล้วทดสอบบนอุปกรณ์จริง
การเข้าถึงได้
เคารพการตั้งค่า prefers-reduced-motion โดยลดระยะเวลาหรือข้ามทรานซิชัน
ตรวจสอบความเข้าใจ
ฟังก์ชันปรับจังหวะมาจากที่ใด
สรุปทบทวน
ปรับ duration, delay และ easing จาก svelte/easing เพื่อให้ได้ความรู้สึกที่เหมาะสม
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 41
- บทเรียน
- 163
คำถามที่พบบ่อย
บทเรียน “พารามิเตอร์การเปลี่ยนภาพ: duration delay easing” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “พารามิเตอร์การเปลี่ยนภาพ: duration delay easing” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “พารามิเตอร์การเปลี่ยนภาพ: duration delay easing”
ปรับแต่งการเปลี่ยนภาพโดยส่งพารามิเตอร์ duration, delay และ easing คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “พารามิเตอร์การเปลี่ยนภาพ: duration delay easing” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- transition:fade และ transition:fly
- พารามิเตอร์การเปลี่ยนภาพ: duration delay easing
- in: และ out: สำหรับการเปลี่ยนภาพแบบไม่สมมาตร
- transition:draw สำหรับเส้นทาง SVG