Transition แบบ CSS กับ JS

ทรานซิชันแบบกำหนดเองจะส่งคืนฟังก์ชัน css (GPU) หรือฟังก์ชัน tick (ขับเคลื่อนด้วย JS ในแต่ละเฟรม)

ใช้กับ transform, opacity, color และทุกสิ่งที่ CSS ทำแอนิเมชันได้ CSS ทำงานบนคอมโพสิตเตอร์เพื่อให้ได้ 60 เฟรมต่อวินาที

ใช้กับการเปลี่ยนข้อความ พิกเซลบนแคนวาส หรือคุณสมบัติอื่นที่ไม่ใช่ CSS

ติ๊กทำงานในทุกเฟรมแอนิเมชันด้วย JavaScript จึงใช้ทรัพยากรมากกว่า CSS

ทรานซิชันบางรายการใช้ CSS สำหรับภาพ และใช้ติ๊กสำหรับการอัปเดตที่ไม่ใช่ CSS เป็นครั้งคราวได้

แอนิเมชัน CSS รองรับอย่างแพร่หลาย ส่วนติ๊กใช้งานได้เสมอเพราะเป็น JS

ทั้งสองแบบเคารพ prefers-reduced-motion หากคุณตรวจสอบค่านี้ภายในทรานซิชัน

ใช้แท็บ Performance เพื่อเปรียบเทียบการทำงานของ CSS กับติ๊ก

หาก CSS สร้างเอฟเฟกต์ที่ต้องการไม่ได้ ให้เปลี่ยนไปใช้ติ๊กอย่างเหมาะสม

องค์ประกอบหลายรายการที่มีทรานซิชันต่างกันสามารถผสม CSS และติ๊กในมุมมองเดียวกันได้

เลือกใช้ CSS เป็นค่าเริ่มต้น และใช้ติ๊กเฉพาะเมื่อ CSS ไม่สามารถแสดงแอนิเมชันนั้นได้จริง ๆ

เมื่อใดควรเลือกใช้ฟังก์ชัน css ในทรานซิชัน

เลือกใช้ css สำหรับทรานซิชันที่เร่งด้วย GPU และสงวนติ๊กไว้สำหรับแอนิเมชันที่ไม่ใช่ CSS เช่น การเปลี่ยนข้อความหรือแคนวาส