tailwindcss motion

✨ 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 >

• ปรับระยะเวลาของ motion-preset-slide-right :

 < div class =" motion-preset-slide-right motion-duration-2000 " > </ div >

• เพิ่มความสูงของ motion-preset-bounce :

 < div class =" motion-preset-bounce -motion-translate-y-in-150 " > </ div > 

ภาพเคลื่อนไหวฐาน

นอกเหนือจากค่าที่ตั้งไว้แล้ว คุณสามารถสร้างแอนิเมชั่นที่คุณกำหนดเองได้โดยการรวมคลาสพื้นฐานเหล่านี้:

• จางหายไป : motion-opacity-in-0
• เลื่อนเข้า :
  • จากด้านล่าง: motion-translate-y-in-100
  • จากด้านบน: -motion-translate-y-in-100
• สเกลใน : motion-scale-in-75
• หมุนเข้า :
  • จาก 180 องศา: motion-rotate-in-180
  • ตั้งแต่ -90 องศา: -motion-rotate-in-90
• Blur In : motion-blur-in-sm
• ระดับสีเทาใน : motion-grayscale-in
• เปลี่ยนสีพื้นหลัง : motion-bg-in-red-500
• เปลี่ยนสีข้อความ : motion-text-in-blue-500

การรวมภาพเคลื่อนไหว

คุณสามารถรวมภาพเคลื่อนไหวหลายรายการไว้ในองค์ประกอบเดียวได้:

 < div
  class =" motion-scale-in-75 motion-translate-y-in-100 motion-rotate-in-90 "
> </ div >

ออกจากภาพเคลื่อนไหว

สำหรับแอนิเมชั่นทางออก เพียงแทนที่ in โดยไม่มี out ในชื่อคลาส

ตัวดัดแปลง

คุณสามารถปรับแต่งระยะเวลา ดีเลย์ และเวลาของแอนิเมชั่นได้

• ระยะเวลา : motion-duration-500
• ความล่าช้า : motion-delay-500
• ฟังก์ชั่นจับเวลา : motion-timing-spring-bouncy

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

 < div
  class =" motion-duration-2000 motion-rotate-in-180 motion-opacity-in-0 "
> </ div >

ซึ่งใช้ระยะเวลา 2,000 มิลลิวินาทีกับทั้งภาพเคลื่อนไหวแบบหมุนและความทึบ

ตัวแก้ไขสำหรับแต่ละคุณสมบัติ

คุณสามารถใช้ตัวแก้ไขกับคุณสมบัติเฉพาะได้โดยใช้เครื่องหมายทับ /

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

 < div
  class =" motion-delay-500/rotate motion-rotate-in-180 motion-opacity-in-0 "
> </ div >

ในที่นี้ ความล่าช้า 500 มิลลิวินาทีจะมีผลกับการหมุน เท่านั้น ไม่ใช่ความทึบ

ฟังก์ชั่นความง่าย

ปลั๊กอินมีฟังก์ชันกำหนดเวลาแบบกำหนดเอง:

ตัวอย่างบางส่วน ได้แก่:

• motion-ease-spring-smooth
• motion-ease-spring-snappy
• motion-ease-spring-bouncy
• motion-ease-spring-bounciest
• motion-ease-bounce
• motion-ease-bounce
• motion-ease-in-quart

ตัวอย่าง

หน้า Landing Page - https://play.tailwindcss.com/uAuVF8F1vC

กล่องโต้ตอบการแชท - https://play.tailwindcss.com/gjGqEKswjQ

เกาะแบบไดนามิกแบตเตอรี่ต่ำ - https://play.tailwindcss.com/tvYFbHtNNQ

ตัวอย่างสีของ Apple - https://play.tailwindcss.com/cvQ3Nk3v8j

รอมโบ้คืออะไร?

Rombo เป็นบริษัทระยะเริ่มต้นที่สร้างเครื่องมือเพื่อช่วยให้บริษัทต่างๆ สร้างอินเทอร์เฟซแบบโต้ตอบที่สวยงาม เรากำลังเริ่มต้นด้วยชุดเครื่องมือสำหรับวิศวกร นักออกแบบ และนักการตลาดเชิงสร้างสรรค์เพื่อสร้างภาพเคลื่อนไหวภายในเวิร์กโฟลว์ทั่วไป เช่น Tailwind, Figma, Webflow, Shopify และอื่นๆ อีกมากมายที่จะตามมาในอนาคต ลงทะเบียนเพื่อรับข้อมูลอัปเดตบนเว็บไซต์ของเราที่ https://rombo.co