การเปลี่ยนผ่านและแอนิเมชันด้วย CSS
พร็อพเพอร์ตี้ transition ใน CSS แอนิเมชันแบบคีย์เฟรม และการใช้ Animate.css ร่วมกับ Vue Transition
การเปลี่ยนผ่านและแอนิเมชันด้วย CSS เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
สองวิธีสร้างภาพเคลื่อนไหวด้วย CSS
CSS มีเครื่องมือสองอย่างที่ทำงานเข้ากับการเปลี่ยนภาพของวิวได้อย่างลงตัว ได้แก่ พร็อพเพอร์ตี transition ซึ่งค่อย ๆ เปลี่ยนระหว่างสองสถานะ และ @keyframes ร่วมกับ animation ซึ่งสร้างลำดับเวลาหลายขั้นตอน วิวสามารถควบคุมได้ทั้งสองแบบ
รูปแบบย่อของการเปลี่ยนภาพ
รูปแบบย่อ transition รวมพร็อพเพอร์ตี ระยะเวลา ฟังก์ชันกำหนดจังหวะ และระยะหน่วงไว้ในบรรทัดเดียว ลำดับคือ พร็อพเพอร์ตี, ระยะเวลา, การผ่อนจังหวะ, ระยะหน่วง
.box {
/* property duration easing delay */
transition: transform 0.4s ease-in-out 0s;
}การเปลี่ยนพร็อพเพอร์ตีหลายรายการ
คั่นการเปลี่ยนภาพหลายรายการด้วยเครื่องหมายจุลภาค คุณสามารถทำให้การแปลงและความทึบเคลื่อนไหวไปพร้อมกันเพื่อสร้างเอฟเฟกต์เลื่อนและจาง
.slide-enter-active,
.slide-leave-active {
transition:
transform 0.3s ease,
opacity 0.3s ease;
}
.slide-enter-from {
transform: translateX(20px);
opacity: 0;
}เมื่อการเปลี่ยนภาพยังไม่เพียงพอ
transition ทำภาพเคลื่อนไหวได้เฉพาะระหว่างสองสถานะเท่านั้น สำหรับการเด้ง การเต้นเป็นจังหวะ หรือการเคลื่อนไหวหลายระยะ คุณต้องใช้ @keyframes ซึ่งช่วยให้กำหนดจุดระหว่างทางได้หลายจุด
การกำหนด Keyframes
@keyframes ตั้งชื่อลำดับของสถานะโดยใช้เปอร์เซ็นต์ หรือ from/to แต่ละจุดจะอธิบายรูปแบบ ณ ตำแหน่งนั้นบนลำดับเวลา
@keyframes bounce-in {
0% { transform: scale(0); }
60% { transform: scale(1.1); }
100% { transform: scale(1); }
}พร็อพเพอร์ตีภาพเคลื่อนไหว
ใช้ชุด keyframe ด้วยรูปแบบย่อ animation: ชื่อ, ระยะเวลา, ฟังก์ชันกำหนดจังหวะ, ระยะหน่วง, จำนวนรอบ, ทิศทาง
.bounce-enter-active {
animation: bounce-in 0.5s ease both;
}เชื่อม Keyframes เข้ากับการเปลี่ยนภาพ
ใส่ animation ไว้ในคลาส enter-active เพื่อให้ทำงานระหว่างการแทรก สำหรับการออก ให้เรียกใช้ keyframe เดิมในทิศทางย้อนกลับ
.bounce-leave-active {
animation: bounce-in 0.5s ease reverse both;
}การใช้ Animate.css
Animate.css เป็นไลบรารีที่มีภาพเคลื่อนไหวแบบ keyframe สำเร็จรูป แทนที่จะเขียนคลาสของคุณเอง คุณสามารถบอกให้วิวใช้คลาสของ Animate.css ได้โดยตรงผ่านพร็อพที่กำหนดคลาสแบบกำหนดเอง
<!-- after importing animate.css -->
<!-- classes like animate__fadeIn are predefined -->enter-active-class และ leave-active-class
<Transition> รับพร็อพสำหรับแทนที่ชื่อคลาสที่สร้างขึ้น enter-active-class และ leave-active-class ช่วยให้คุณนำคลาสภายนอกใด ๆ มาใช้ได้ เหมาะอย่างยิ่งสำหรับ Animate.css
<Transition
enter-active-class="animate__animated animate__fadeIn"
leave-active-class="animate__animated animate__fadeOut"
>
<div v-if="show">Animated by Animate.css</div>
</Transition>กำหนดระยะเวลาอย่างชัดเจน
เมื่อจังหวะเวลาของ CSS ไม่ชัดเจน เช่น มีทั้ง animation และ transition ให้กำหนดพร็อพ duration เพื่อให้วิวทราบอย่างแน่ชัดว่าควรนำคลาสออกเมื่อใด พร็อพนี้รับตัวเลขหรือออบเจ็กต์ที่มีค่าเข้าและออก
<Transition :duration="{ enter: 500, leave: 300 }">
<div v-if="show">Precise timing</div>
</Transition>ฟังก์ชันกำหนดจังหวะมีความสำคัญ
ฟังก์ชันกำหนดจังหวะจะกำหนดความรู้สึกของการเคลื่อนไหว ease-out ให้ความรู้สึกตอบสนองได้ดีสำหรับการเข้า ส่วน ease-in เหมาะสำหรับการออก และ cubic-bezier() ให้การควบคุมอย่างเต็มที่
.pop-enter-active {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}ตรวจสอบอย่างรวดเร็ว
พร็อพใดช่วยให้คุณใช้คลาสของ Animate.css ระหว่างการเข้า
สรุปทบทวน
คุณได้เปรียบเทียบรูปแบบย่อของการเปลี่ยนผ่าน transition (การแทรกค่าระหว่างสองสถานะ) กับ @keyframes ร่วมกับ animation (ไทม์ไลน์หลายขั้นตอน) และเรียนรู้การผสาน Animate.css ผ่านพร็อพ enter-active-class และ leave-active-class โดยใช้ duration เพื่อกำหนดเวลาอย่างแม่นยำ
คำถามที่พบบ่อย
บทเรียน “การเปลี่ยนผ่านและแอนิเมชันด้วย CSS” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การเปลี่ยนผ่านและแอนิเมชันด้วย CSS” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การเปลี่ยนผ่านและแอนิเมชันด้วย CSS”
พร็อพเพอร์ตี้ transition ใน CSS แอนิเมชันแบบคีย์เฟรม และการใช้ Animate.css ร่วมกับ Vue Transition คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การเปลี่ยนผ่านและแอนิเมชันด้วย CSS” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- คอมโพเนนต์ Transition
- การเปลี่ยนผ่านและแอนิเมชันด้วย CSS
- ฮุกการเปลี่ยนผ่านด้วย JavaScript
- TransitionGroup สำหรับแอนิเมชันรายการ