Animate

เมื่อไรควรใช้

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

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

วิธีการทำงาน

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

1. การเข้าและออก: อิลิเมนต์ปรากฏและหายไปด้วยการจาง 200-300ms บวก Y หรือสเกลที่ละเอียด ไม่ใช่คุณสมบัติเลย์เอาต์
2. การตอบกลับสถานะ: hover, active, focus, loading, success สื่อสารผ่านการเคลื่อนไหวแทนการสลับทันที
3. การเปลี่ยนผ่านระหว่างวิว: การเปลี่ยนผ่านอิลิเมนต์ที่ใช้ร่วมกันที่เหมาะสม หรือ fade-through ในกรณีอื่น
4. ความคืบหน้าและการโหลด: หน้าจอโครงกระดูง แถบความคืบหน้าแบบกำหนดได้ การเคลื่อนไหวที่บอกว่า “กำลังทำอยู่”
5. การเคลื่อนไหวลดลง: ทุกแอนิเมชันมี fallback prefers-reduced-motion

Easing เป็นแบบเอกซ์โพเนนเชียลเสมอ (ease-out-quart, quint หรือ expo) เพราะวัตถุจริงชะลอตัวอย่างราบรื่น ไม่มีการเด้ง ไม่มีสปริงยืดหยุ่น ไม่มี linear สำหรับอะไรนอกจากตัวบอกความคืบหน้า

สกิลแอนิเมตแค่ transform และ opacity หากคุณพบว่ากำลังแอนิเมต width, height, top หรือ left นั่นคือการทำสิ่งผิด ใช้ grid-template-rows สำหรับการเปลี่ยนความสูง

ลองใช้งาน

/impeccable animate the sign-up flow

สิ่งที่เพิ่มโดยทั่วไป:

• ช่องอีเมลได้เอฟเฟกต์เรืองแสงเมื่อโฟกัส (opacity + shadow, 180ms)
• ปุ่มส่งแสดงสปินเนอร์ภายในตัวมันเองในสถานะโหลด ไม่ใช่สปินเนอร์แยกข้างๆ
• หน้าสำเร็จเข้าด้วย opacity + translateY(8px), 260ms, ease-out-quart
• ข้อความแจ้งข้อผิดพลาดเลื่อนลงด้วย grid-template-rows (ไม่ใช่ height), 220ms
• fallback @media (prefers-reduced-motion: reduce) สำหรับทุกการเปลี่ยน

ข้อควรระวัง

• ขอ “แอนิเมชันเพิ่มเติม” Animate ไม่ใช่ปุ่มหมุน มันเพิ่มเมื่อการเคลื่อนไหวสื่อสาร ไม่ใช่ทุกที่
• ลบ fallback reduced-motion สกิลเพิ่มอัตโนมัติ ไม่อาจเจรจาได้สำหรับการเข้าถึง