แอนิเมชันเข้าและออกโดยไม่ใช้ไลบรารี

เมื่อคุณแสดงผลแบบมีเงื่อนไขด้วย {show && } React จะนำองค์ประกอบออกจาก DOM ทันทีที่เงื่อนไข show เป็นเท็จ จึงไม่มีเวลาสำหรับแอนิเมชันตอนออก เพราะโหนดถูกนำออกไปแล้ว

แอนิเมชันตอนเข้าสร้างได้ง่าย ส่วนแอนิเมชันตอนออกคือความท้าทายที่แท้จริง

วิธีแก้ที่ง่ายที่สุดคือไม่ถอดองค์ประกอบออกเลย ให้แสดงผลองค์ประกอบไว้และทำให้ opacity เป็นศูนย์ พร้อมใช้ pointer-events: none เมื่อซ่อน จากนั้นเปลี่ยนกลับเป็นหนึ่งเมื่อแสดง

วิธีนี้ทำให้การค่อย ๆ ปรากฏและหายไปราบรื่นทั้งสองทิศทาง โดยแลกกับการที่องค์ประกอบยังคงอยู่ใน DOM

หากต้องการถอดองค์ประกอบออกจริง ๆ ให้จำลองเครื่องสถานะขนาดเล็กที่มีเฟสอย่าง mounting mounted unmounting และ unmounted โดยจะนำโหนดออกก็ต่อเมื่อแอนิเมชันตอนออกทำงานเสร็จแล้ว

สถานะจะกำหนดว่าคลาสแอนิเมชันใดถูกใช้ในแต่ละเฟส

คุณสามารถรวมเครื่องสถานะนี้ไว้ในฮุกแบบกำหนดเอง ซึ่งมักเรียกว่า useMount ฮุกรับค่าการมองเห็นที่ต้องการ และคืนค่าว่าองค์ประกอบควรอยู่ใน DOM หรือไม่ พร้อมเฟสปัจจุบัน

คอมโพเนนต์จึงยังคงสะอาด เพราะตรรกะด้านจังหวะเวลาจะอยู่ในฮุกที่นำกลับมาใช้ซ้ำได้

ตามรูปแบบที่ใช้กันทั่วไป ให้ใช้ enter แล้วตามด้วย enter-active เมื่อติดตั้ง และใช้ exit แล้วตามด้วย exit-active เมื่อนำออก คลาสพื้นฐานกำหนดสถานะเริ่มต้น ส่วนคลาสที่ทำงานอยู่กำหนดสถานะสิ้นสุดพร้อมการเปลี่ยนผ่าน

การสลับระหว่างสองคลาสในเฟรมที่เหมาะสมจะทำให้เกิดแอนิเมชัน

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

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

คุณสามารถรวมทั้งหมดนี้ไว้ในคอมโพเนนต์ Transition ที่รับพร็อพ in และองค์ประกอบลูก คอมโพเนนต์จะคงองค์ประกอบลูกไว้ตลอดแอนิเมชันตอนออก และใช้คลาสที่เหมาะสมตามแต่ละเฟส

ผู้ใช้คอมโพเนนต์เพียงสลับค่า in ก็จะได้การเคลื่อนไหวตอนเข้าและตอนออกที่ถูกต้องโดยไม่ต้องจัดการเอง

รายละเอียดเล็กน้อยที่สำคัญคือ คุณต้องปล่อยให้เบราว์เซอร์วาดคลาสเริ่มต้นก่อนเพิ่มคลาสที่ทำงานอยู่ มิฉะนั้นองค์ประกอบจะกระโดดโดยไม่มีการเปลี่ยนผ่าน การใช้ requestAnimationFrame หรือการบังคับให้เกิดการจัดเรียงเค้าโครงใหม่ระหว่างสองขั้นตอนจะทำให้การเปลี่ยนผ่านทำงานจริง

วิธีนี้ทำให้มั่นใจได้ว่าเบราว์เซอร์จะจดจำค่าเริ่มต้นก่อน

ไลบรารี react-transition-group มีคอมโพเนนต์ Transition และ CSSTransition ที่ใช้รูปแบบนี้โดยตรง รวมถึงวงจรชีวิตของคลาสและจังหวะการถอดองค์ประกอบออก

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

สำหรับการค่อย ๆ ปรากฏแบบง่ายเพียงครั้งเดียว แนวทางคงองค์ประกอบไว้หรือฮุกขนาดเล็กก็เพียงพอและไม่ต้องเพิ่มการพึ่งพา สำหรับการเปลี่ยนผ่านที่ประสานกันหลายรายการ รายการที่มีการเพิ่มและนำออก หรือการจัดลำดับที่ซับซ้อน ไลบรารีจะช่วยประหยัดเวลาและลดข้อผิดพลาดในกรณีขอบ

ให้เลือกตามระดับความซับซ้อนของแอนิเมชันที่แอปของคุณต้องการจริง ๆ

แอนิเมชันตอนออกจำเป็นต้องคงองค์ประกอบไว้จนกว่าแอนิเมชันจะเสร็จ ไม่ว่าจะใช้วิธีไม่ถอดองค์ประกอบออก ใช้เครื่องสถานะร่วมกับ transitionend หรือใช้ไลบรารี

ความเข้าใจกลไกเหล่านี้ช่วยให้คุณเลือกแนวทางที่เบาที่สุดและยังตอบโจทย์ความต้องการได้

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

คุณยังได้เห็นว่าเมื่อใดควรเลือกใช้ react-transition-group แทน DIY