สร้าง Accordion animation ด้วย React-pose
Published in
1 min readMay 19, 2019
React-pose เป็น library ที่ช่วยให้เราสร้าง animation ได้ง่ายและสะดวกขึ้นทำให้เราสามารถพัฒนาเว็บได้เร็วขึ้น อีกทั้งยังรองรับ React Native และ VueJS ด้วยครับ
ผลลัพธ์ที่เราต้องการจะมีหน้าตาประมาณนี้ครับ
Prerequisite
- NodeJs
- create-react-app
- react-pose
- bootstrap
Install
- สร้าง Project ด้วย create-react-app ตามด้วยชื่อเช่น create-react-app MyProject
- ติดตั้ง dependencies react-pose โดยใช้คำสั่ง npm install react-pose
- ติดตั้ง dependencies bootstrap โดยใช้คำสั่ง npm install bootstrap
Create UI
- เข้าไปในไฟล์ 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/