transition:fade และ transition:fly
ใช้การเปลี่ยนภาพ fade และ fly ที่มีมาให้กับองค์ประกอบที่ควบคุมด้วย {#if}
transition:fade และ transition:fly เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
ทรานซิชันในตัว
Svelte มีทรานซิชันหลายรายการใน svelte/transition ได้แก่ การจาง การเคลื่อนเข้าหา การเลื่อน การย่อขยาย การเบลอ และการวาด
นำเข้าทรานซิชัน
นำเข้าทรานซิชันที่ต้องการใช้งาน
import { fade, fly } from "svelte/transition";แนบด้วย transition:
ใช้ transition: กับองค์ประกอบที่ควบคุมด้วย {#if}
{#if visible}
<p transition:fade>Hello</p>
{/if}ทรานซิชันการเคลื่อนเข้า
ทรานซิชันการเคลื่อนเข้าจะย้ายองค์ประกอบจากตำแหน่งที่มีค่าชดเชยพิกัดไปยังตำแหน่งจริง
{#if visible}
<div transition:fly={{ x: -200, duration: 400 }}>Slide in</div>
{/if}ออบเจ็กต์พารามิเตอร์
ส่งตัวเลือกอย่าง x, y, duration, delay และ easing
เมื่อทริกเกอร์ทำงาน
ทรานซิชันจะทำงานเมื่อเมาต์และถอดเมาต์องค์ประกอบภายในบล็อก {#if}, {#each} หรือ {#await}
การรวมทรานซิชัน
ใช้ทรานซิชันหนึ่งรายการต่อคำสั่ง ใช้ in: และ out: สำหรับทรานซิชันแบบไม่สมมาตร
ประสบการณ์ผู้ใช้ที่ราบรื่น
ทรานซิชันช่วยให้ส่วนติดต่อผู้ใช้ดูประณีตขึ้นโดยไม่ต้องเขียนคีย์เฟรมด้วยตนเอง
ประสิทธิภาพ
ทรานซิชันในตัวใช้ CSS เมื่อทำได้ เพื่อเร่งการประมวลผลด้วย GPU
การลดการเคลื่อนไหว
เคารพการตั้งค่า prefers-reduced-motion โดยใช้ทรานซิชันแบบมีเงื่อนไข
การปรับจังหวะ
ส่งฟังก์ชันปรับจังหวะจาก svelte/easing เพื่อสร้างการเคลื่อนไหวที่ซับซ้อนยิ่งขึ้น
import { cubicOut } from "svelte/easing";
<p transition:fade={{ easing: cubicOut }}>...</p>ตรวจสอบความเข้าใจ
ทรานซิชันทำงานที่ใด
สรุปทบทวน
นำเข้าจาก svelte/transition แนบด้วย transition: และส่งออบเจ็กต์พารามิเตอร์เพื่อควบคุม
คำถามที่พบบ่อย
บทเรียน “transition:fade และ transition:fly” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “transition:fade และ transition:fly” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “transition:fade และ transition:fly”
ใช้การเปลี่ยนภาพ fade และ fly ที่มีมาให้กับองค์ประกอบที่ควบคุมด้วย {#if} คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “transition:fade และ transition:fly” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- transition:fade และ transition:fly
- พารามิเตอร์การเปลี่ยนภาพ: duration delay easing
- in: และ out: สำหรับการเปลี่ยนภาพแบบไม่สมมาตร
- transition:draw สำหรับเส้นทาง SVG