in: และ out: สำหรับการเปลี่ยนภาพแบบไม่สมมาตร
ระบุการเปลี่ยนภาพที่แตกต่างกันสำหรับการเข้าสู่และออกจากองค์ประกอบ
in: และ out: สำหรับการเปลี่ยนภาพแบบไม่สมมาตร เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดจึงไม่สมมาตร
บางครั้งคุณต้องการภาพเคลื่อนไหวที่แตกต่างกันสำหรับการเข้าสู่และการออกจากองค์ประกอบ
คำสั่ง in:
ใช้ทรานซิชันเฉพาะเมื่อแทรกองค์ประกอบ
<p in:fly={{ y: 50 }}>Enter</p>คำสั่ง out:
ใช้ทรานซิชันเฉพาะเมื่อลบองค์ประกอบ
<p out:fade>Leave</p>ใช้ทั้งสองคำสั่งร่วมกัน
ใช้คำสั่งทั้งสองกับองค์ประกอบเดียวกันเพื่อสร้างภาพเคลื่อนไหวเข้าและออกแบบกำหนดเองได้อย่างสมบูรณ์
<p in:fly={{ y: 50 }} out:fade={{ duration: 200 }}>...</p>ฟังก์ชันที่แตกต่างกัน
ทรานซิชันเข้าและออกสามารถเป็นฟังก์ชันที่แตกต่างกันโดยสิ้นเชิง เช่น การเคลื่อนเข้ากับการจาง
พารามิเตอร์ที่แตกต่างกัน
ส่งระยะเวลา การหน่วงเวลา หรือการปรับจังหวะที่แตกต่างกันสำหรับแต่ละทิศทาง
ใช้ในบล็อก #if
องค์ประกอบต้องถูกสร้างหรือลบแบบรีแอกทีฟ เช่นเดียวกับทรานซิชันทั่วไป
หลีกเลี่ยงการใช้ transition: และ in:/out: พร้อมกัน
เลือกใช้ transition: สำหรับแบบสมมาตร หรือ in:/out: สำหรับแบบไม่สมมาตร การใช้ผสมกันจะทำให้เกิดข้อขัดแย้ง
ตัวอย่างจริง
การแจ้งเตือนแบบโทสต์อาจเคลื่อนเข้าจากด้านบนและค่อย ๆ จางหายไป ณ ตำแหน่งเดิม
<div in:fly={{ y: -50 }} out:fade>{message}</div>ประสิทธิภาพ
ทรานซิชันแต่ละรายการใช้ CPU จึงควรใช้อย่างพอเหมาะกับรายการขนาดใหญ่
รูปแบบสรุปทบทวน
ทรานซิชันแบบไม่สมมาตรช่วยยกระดับส่วนติดต่อผู้ใช้ได้อย่างรวดเร็ว การเข้าสู่ระบบให้ความรู้สึกน่าใช้ ส่วนการออกจากระบบให้ความรู้สึกรวดเร็ว
ตรวจสอบความเข้าใจ
in: แตกต่างจาก out: อย่างไร
สรุปทบทวน
ใช้ in: สำหรับการเข้าสู่ ใช้ out: สำหรับการออก และใช้ร่วมกันเพื่อสร้างทรานซิชันที่ไม่สมมาตรและประณีต
คำถามที่พบบ่อย
บทเรียน “in: และ out: สำหรับการเปลี่ยนภาพแบบไม่สมมาตร” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “in: และ out: สำหรับการเปลี่ยนภาพแบบไม่สมมาตร” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “in: และ out: สำหรับการเปลี่ยนภาพแบบไม่สมมาตร”
ระบุการเปลี่ยนภาพที่แตกต่างกันสำหรับการเข้าสู่และออกจากองค์ประกอบ คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “in: และ out: สำหรับการเปลี่ยนภาพแบบไม่สมมาตร” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- transition:fade และ transition:fly
- พารามิเตอร์การเปลี่ยนภาพ: duration delay easing
- in: และ out: สำหรับการเปลี่ยนภาพแบบไม่สมมาตร
- transition:draw สำหรับเส้นทาง SVG