ทรานซิชันการเพิ่มและนำออก
ทำให้มุมมองที่ปรากฏและหายไปมีแอนิเมชัน
ทรานซิชันการเพิ่มและนำออก เป็นบทเรียน SwiftUI Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน SwiftUI Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส SwiftUI Academy มีบทเรียนทั้งหมด 4 บทเรียน
บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ
Views Coming and Going
When a view is added or removed, a transition describes how it animates in and out instead of just popping.
Transitions Need Animation
A transition only plays when the insertion or removal happens inside an animation, like a withAnimation toggle of a boolean.
The .transition Modifier
You attach .transition to the view that appears or disappears, choosing the style of its entrance and exit.
if show {
Banner().transition(.opacity)
}Fade with .opacity
The simplest transition is .opacity, which fades a view in when added and out when removed.
Slide In and Out
The .slide transition moves a view in from one edge and out the other, great for banners and rows.
.transition(.slide)Scale to Grow
The .scale transition grows a view from small to full size on insert and shrinks it on removal.
.transition(.scale)Move from an Edge
Use .move(edge:) to push a view in from a specific side, such as the bottom for a toast message.
.transition(.move(edge: .bottom))Combine Transitions
Chain effects with .combined(with:) so a view can fade while it slides, giving richer motion.
.transition(.opacity.combined(with: .slide))Asymmetric Transitions
With .asymmetric you set different insertion and removal effects, like scale in but fade out.
.transition(.asymmetric(
insertion: .scale,
removal: .opacity))Trigger the Change
Wrap the boolean toggle in withAnimation so the conditional view runs its transition rather than appearing instantly.
withAnimation {
show.toggle()
}Transitions and Identity
SwiftUI plays a transition based on view identity: a view truly entering or leaving the hierarchy, not just changing values.
Quick Check
What is required for a transition to actually play?
Recap: Transitions
You learned that .transition styles how views enter and leave, from fades to slides to asymmetric combos, all triggered by animated changes. 🎬
เรียนรู้ Swift ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 30
- บทเรียน
- 120
คำถามที่พบบ่อย
บทเรียน “ทรานซิชันการเพิ่มและนำออก” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ทรานซิชันการเพิ่มและนำออก” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส SwiftUI Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส SwiftUI Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ทรานซิชันการเพิ่มและนำออก”
ทำให้มุมมองที่ปรากฏและหายไปมีแอนิเมชัน คุณปฏิบัติ SwiftUI Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน SwiftUI Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน SwiftUI Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “ทรานซิชันการเพิ่มและนำออก” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน SwiftUI Academy นี้ได้ไหม
ได้ บทเรียน SwiftUI Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- แอนิเมชันโดยนัย
- แอนิเมชันชัดแจ้งด้วย withAnimation
- ทรานซิชันการเพิ่มและนำออก
- เส้นโค้งจังหวะแบบสปริงและกำหนดเอง