สร้าง Accordion animation ด้วย React-pose

React-pose เป็น library ที่ช่วยให้เราสร้าง animation ได้ง่ายและสะดวกขึ้นทำให้เราสามารถพัฒนาเว็บได้เร็วขึ้น อีกทั้งยังรองรับ React Native และ VueJS ด้วยครับ

ผลลัพธ์ที่เราต้องการจะมีหน้าตาประมาณนี้ครับ

Prerequisite

1. NodeJs
2. create-react-app
3. react-pose
4. bootstrap

Install

1. สร้าง Project ด้วย create-react-app ตามด้วยชื่อเช่น create-react-app MyProject
2. ติดตั้ง dependencies react-pose โดยใช้คำสั่ง npm install react-pose
3. ติดตั้ง dependencies bootstrap โดยใช้คำสั่ง npm install bootstrap

Create UI

1. เข้าไปในไฟล์ App.js และแก้ไขโคด

• สร้าง component ชื่อ Content และใส่ React posed เข้าไปพร้อมกับ config
• key ของ object มี 2 key ซึ่งเราจะตั้งชื่ออะไรก็ได้ในที่นี้จะเป็น closed กับ open
• key closed มีหน้าที่คือซ่อน ui โดยตั้งค่าให้ความสูงเป็น 0 มีความทึบแสงเป็น 0 และมี duration หรือระยะเวลาการแสดงผลคือ 350 millisecond
• key open มีหน้าที่คือแสดง ui โดยตั้งค่าให้ความสูงเป็น auto ซึ่งจะทำให้ความสูงมีความยืดหยุ่นตาม content ที่อยู่ข้างใน มีความทึบแสงเป็น 1 และมี duration หรือระยะเวลาการแสดงผลคือ 350 millisecond

2. สร้างไฟล์ใหม่ชื่อ data.js เพื่อจำลองข้อมูลในการแสดงผลซึ่งเราจะ import เข้าไปใน App.js

3. Import สิ่งที่จำเป็นต้องใช้เข้าไปไหนหน้า App.js

4. ในส่วน Render จะได้ Code ประมาณนี้ครับ

• ในบรรทัดที่ 29 จะมีคำสั่ง onClick ซึ่งมีหน้าที่คือส่งค่า index หรือค่า i ไปยัง function handleShowItem เพื่อทำการเซ็ตค่าตัวแปร showIndex และนำไปเช็คว่าตอนนี้เรากดคลิ๊กที่ Card ไหนอยู่และจะให้ ui ที่อยู่ข้างใต้ Card นั้นกางออก
• ในบรรทัดที่ 37 จะมีการเรียก Component Content ที่เราได้ทำการสร้างขึ้นมาพร้อมกับส่ง Property ชื่อ pose={showIndex === i ? ‘open’ : ‘closed’} ซึ่งจะทำการเช็คว่าตอนนี้ตัวแปร showIndex มีค่าเท่ากับค่า index ไหนถ้าเป็นจริงจะทำการกาง ui Content ออกถ้าไม่ใช่จะทำการซ่อน ui แทนถ้าสังเกตจะเห็นว่ามีคำว่า open กับ closed อยู่ซึ่งเป็นตัวแปรตัวเดียวกันกับ key ที่เราได้ประกาศไว้ใน Content นั่นเอง

5. ตกแต่งหน้าตาด้วย CSS ในหน้า App.css

• ในส่วนของ CSS นี้จะเน้นการใช้ display: grid ซึ่งช่วยให้เราวางตำแหน่งของ ui ได้ง่ายขึ้นมากๆ ถ้าหากผู้อ่านสนใจเรื่อง CSS Grid ผมแนะนำเว็บนี้ครับ https://css-tricks.com/snippets/css/complete-guide-grid/

สำหรับใครที่อยากศึกษา react-pose เพิ่มเติมสามารถไปอ่านต่อได้ที่ https://popmotion.io/pose/