การเปลี่ยนผ่าน CSS เมื่อสถานะ React เปลี่ยนแปลง

CSS transition จะค่อย ๆ เปลี่ยนคุณสมบัติจากค่าหนึ่งไปเป็นอีกค่าหนึ่งตามเวลา แทนการเปลี่ยนฉับพลัน คุณประกาศสิ่งนี้ให้กับองค์ประกอบด้วย transition: property duration timing-function delay

ใน React โดยทั่วไปคุณไม่จำเป็นต้องทำให้ค่าอินไลน์เคลื่อนไหวด้วยตนเอง แต่ให้สลับคลาสหรือสไตล์ด้วยสถานะ แล้วปล่อยให้ CSS จัดการเฟรมระหว่างกลางให้

รูปแบบที่ใช้กันทั่วไปคือเก็บค่าบูลีนไว้ใน useState และสลับคลาส CSS เมื่อค่านั้นเปลี่ยน เมื่อคลาสเปลี่ยน คุณสมบัติเป้าหมายจะได้รับค่าใหม่ และ CSS จะทำให้ความแตกต่างนั้นเคลื่อนไหวอย่างต่อเนื่อง

ตัวอย่างเช่น isOpen จะกำหนดว่าองค์ประกอบมีคลาส open หรือไม่ และคลาส open จะกำหนดความสูงหรือการแปลงเป็นค่าอื่น

การตั้งค่าทั่วไปคือ const [isVisible, setIsVisible] = useState(false) โดยปุ่มจะเรียก setIsVisible(v => !v) เพื่อสลับค่า

การใช้ตัวอัปเดตแบบฟังก์ชัน v => !v ช่วยหลีกเลี่ยงสถานะเก่าที่ไม่เป็นปัจจุบันเมื่อมีการจัดคิวการอัปเดตหลายรายการ ทำให้การสลับค่าทำงานได้อย่างน่าเชื่อถือ

คุณสร้าง className แบบไดนามิกดังนี้: className={'panel ' + (isVisible ? 'panel--shown' : 'panel--hidden')} คลาสพื้นฐานจะเก็บการประกาศการเปลี่ยนผ่านไว้ ส่วนคลาสตัวปรับแต่งจะเก็บค่าเริ่มต้นและค่าสุดท้าย

การวาง transition ไว้บนคลาสพื้นฐานที่มีอยู่เสมอทำให้แอนิเมชันทำงานได้ทั้งสองทิศทาง ทั้งตอนเปิดและตอนปิด

คุณสามารถทำให้คุณสมบัติหลายรายการเคลื่อนไหวพร้อมกันได้ด้วยการระบุรายการเหล่านั้นไว้ด้วยกัน: transition: transform 300ms ease, opacity 300ms ease เอฟเฟกต์จางและเลื่อนจะรวมการเปลี่ยนแปลงของ opacity เข้ากับ translateY บน transform

การทำให้ทั้งสองอย่างเคลื่อนไหวพร้อมกันจะสร้างการปรากฏที่ดูประณีต โดยองค์ประกอบจะเลื่อนขึ้นพร้อมกับค่อย ๆ ปรากฏ

transition-delay จะเลื่อนการเริ่มต้นของการเปลี่ยนผ่านออกไป การกำหนดเวลาหน่วงที่เพิ่มขึ้นให้กับรายการแต่ละรายการจะสร้างการเคลื่อนไหวแบบต่อเนื่องเหลื่อมกัน โดยแต่ละรายการจะเคลื่อนไหวหลังรายการก่อนหน้าเล็กน้อย

ใน React คุณสามารถคำนวณเวลาหน่วงแบบอินไลน์ได้ เช่น style={{ transitionDelay: index * 50 + 'ms' }}

คุณสมบัติ display ไม่สามารถทำให้เคลื่อนไหวได้ เพราะไม่มีค่าระหว่างกลางระหว่าง none และ block การทำให้คุณสมบัตินี้เปลี่ยนผ่านจึงทำให้เกิดการกระโดดฉับพลัน ไม่ใช่การค่อย ๆ จาง

ให้ทำให้ opacity เคลื่อนไหวเพื่อสร้างเอฟเฟกต์จางแทน และสลับ pointer-events: none เพื่อให้องค์ประกอบที่ซ่อนอยู่ไม่ตอบสนองต่อการคลิกขณะที่มองไม่เห็น

ฟังก์ชันกำหนดจังหวะจะกำหนดรูปแบบการเปลี่ยนความเร็วตลอดระยะเวลา linear จะเคลื่อนที่ด้วยความเร็วคงที่ ease จะเริ่มต้นและสิ้นสุดอย่างช้า ๆ ส่วน cubic-bezier(...) ให้คุณกำหนดเส้นโค้งแบบกำหนดเองได้อย่างสมบูรณ์

เส้นโค้งแบบกำหนดเองเหมาะสำหรับความรู้สึกที่ฉับไวหรือเด้งเล็กน้อย เช่น cubic-bezier(0.34, 1.56, 0.64, 1) สำหรับการเลยจุดเป้าหมายเล็กน้อย

คุณสามารถเก็บระยะเวลาไว้ในคุณสมบัติกำหนดเองของ CSS เช่น --speed: 300ms แล้วนำกลับมาใช้ซ้ำได้ด้วย transition: opacity var(--speed) ease วิธีนี้ช่วยให้จังหวะเวลาสอดคล้องกันในทุกคอมโพเนนต์

React ยังสามารถกำหนดตัวแปรแบบอินไลน์ผ่าน style={{ '--speed': '500ms' }} ได้ ทำให้พร็อพส์เป็นตัวกำหนดจังหวะเวลาของแอนิเมชัน

เบราว์เซอร์สามารถทำให้ transform และ opacity เคลื่อนไหวบนตัวจัดองค์ประกอบของ GPU ได้ โดยไม่ต้องคำนวณเค้าโครงใหม่หรือวาดภาพใหม่ทุกเฟรม การทำให้คุณสมบัติอย่าง width, top หรือ margin เคลื่อนไหวจะบังคับให้มีการคำนวณเค้าโครงในทุกเฟรม และอาจทำให้ภาพกระตุก

เมื่อคุณต้องการย้าย ย่อขยาย หรือหมุน ให้เลือกใช้ transform และเมื่อคุณต้องการทำให้จาง ให้ใช้ opacity

การเปลี่ยนผ่านใน React ที่ทำงานได้อย่างน่าเชื่อถือจะรวมสถานะบูลีน คลาสตัวปรับแต่งแบบมีเงื่อนไข และคลาสพื้นฐานที่ประกาศ transition บนคุณสมบัติที่เหมาะกับ GPU สถานะจะสลับคลาส และ CSS จะจัดการแอนิเมชัน

วิธีนี้ทำให้คอมโพเนนต์ของคุณยังคงประกาศตามสถานะ พร้อมใช้ประโยชน์จากเบราว์เซอร์เพื่อสร้างการเคลื่อนไหวที่ลื่นไหล

ทดสอบความเข้าใจเกี่ยวกับแอนิเมชันที่มีประสิทธิภาพ

คุณได้เรียนรู้วิธีเริ่มการเปลี่ยนผ่านของ CSS ด้วยการสลับคลาสที่ขับเคลื่อนด้วยสถานะ ทำให้การแปลงและความทึบเคลื่อนไหวพร้อมกัน สร้างจังหวะเหลื่อมด้วยการหน่วงเวลา และหลีกเลี่ยงการเปลี่ยนผ่านของ display ด้วยการใช้ความทึบร่วมกับเหตุการณ์ตัวชี้

คุณยังได้เรียนรู้ฟังก์ชันกำหนดจังหวะ ระยะเวลาจากตัวแปร CSS และเหตุผลที่คุณสมบัติซึ่ง GPU จัดองค์ประกอบช่วยให้การเคลื่อนไหวลื่นไหล