การเคลื่อนไหวของลมหาง

✨ tailwindcss-motion β ✨

tailwindcss-motion เป็นปลั๊กอิน CSS ของ Tailwind ที่สร้างที่ RomboHQ เป็นไลบรารีแอนิเมชั่นที่เรียบง่ายแต่ทรงพลังพร้อมไวยากรณ์ที่เรียบง่าย

การเคลื่อนไหวไม่มีความปั่นป่วน

⚒️ติดตั้ง

1. ติดตั้งแพ็คเกจ npm

npm i -D tailwindcss-motion

2. เพิ่มลงใน tailwind.config.js ของคุณ

 // tailwind.config.js

export default {
     content : [ ... ] ,
     theme : {
        extend : { ... } ,
     } ,
     plugins : [ require ( 'tailwindcss-motion' ) ] ,
} ;

หรือ เพื่อใช้ ESM:

 import tailwindcssMotion from "tailwindcss-motion" ;

/** @type {import('tailwindcss').Config} */
export default {
     content : [ ... ] ,
     theme : {
          extend : { } ,
     } ,
     plugins : [ tailwindcssMotion ] ,
} ; 

มันทำงานอย่างไร?

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

ตัวอย่างเช่น สำหรับเอฟเฟกต์สไลด์และเฟด คุณเพียงแค่ต้องมี motion-translate-x-in-25 motion-opacity-in-0 หรือคุณสามารถใช้หนึ่งในค่าที่ตั้งล่วงหน้าของเรากับ motion-preset-fade

ค่าที่ตั้งไว้ล่วงหน้าของการเคลื่อนไหว

เรามีคอลเลกชันของค่าที่ตั้งล่วงหน้าเพื่อทำให้ส่วนประกอบของคุณเคลื่อนไหวได้อย่างง่ายดาย:

• จาง : motion-preset-fade
• สไลด์ :
  • ขวา: motion-preset-slide-right
  • ซ้าย: motion-preset-slide-left
  • ขึ้น: motion-preset-slide-up
  • ลง: motion-preset-slide-down
• โฟกัส : motion-preset-focus
• เบลอ :
  • ขวา: motion-preset-blur-right
  • ซ้าย: motion-preset-blur-left
  • ขึ้น: motion-preset-blur-up
  • ลง: motion-preset-blur-down
• ตีกลับ : motion-preset-bounce
• ขยาย : motion-preset-expand
• หด : motion-preset-shrink
• ป๊อป : motion-preset-pop
• บีบอัด : motion-preset-compress
• เขย่า : motion-preset-shake
• กระดิก : motion-preset-wiggle
• ลูกปา : motion-preset-confetti
• เครื่องพิมพ์ดีด : motion-preset-typewriter-[number of characters]
• Flomoji : motion-preset-flomoji

การปรับแต่งค่าที่ตั้งล่วงหน้า

คุณสามารถปรับแต่งค่าที่ตั้งล่วงหน้าเพิ่มเติมได้โดยใช้แอนิเมชั่นพื้นฐานและคลาสตัวปรับแต่ง

ตัวอย่างเช่น:

• เพิ่มความล่าช้าใน motion-preset-fade :

">

 < div class =" motion-preset-fade motion-delay-500 " >  div >