مایعات ساختمان ، انیمیشن های ایمن در حرکات در CSS Tailwind که به ترجیحات کاربر احترام می گذارند

انیمیشن ها می توانند UX را ارتقا دهند-اما اگر آنها تنظیمات سیستم کاربر را نادیده بگیرند (مانند “ترجیح دادن به حرکت”) ، می توانند به بدهی های دسترسی تبدیل شوند. Tailwind CSS ساخت آن را به طرز تکان دهنده ای آسان می کند *انیمیشن های ایمن *، *سیال *بدون رسیدن به CSS سفارشی یا JavaScript. بیایید یک خط لوله انیمیشن کاملاً سیال و محترم بسازیم.

چرا انیمیشن های ایمن حرکت؟

دلایل دنیای واقعی:

• به کاربرانی که انیمیشن ها را به دلایل سلامتی غیرفعال می کنند احترام بگذارید
• از انتقال پرشور در دستگاه های کم مصرف جلوگیری کنید
• دسترسی به دسترسی بدون قربانی کردن زیبایی شناسی

مرحله 1: از Tailwind استفاده کنید motion-safe انواع مختلف

Tailwind به طور خودکار یک motion-safe: پیشوند نوع. مثال:

  Welcome back!

این تضمین می کند fadeIn اگر سیستم کاربر اجازه انیمیشن ها را بدهد ، انیمیشن * فقط اجرا می شود.

مرحله 2: انیمیشن های سیال سفارشی ایجاد کنید

پیکربندی Tailwind را با یک انیمیشن بسیار سیال گسترش دهید:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        fluidSlide: {
          '0%': { transform: 'translateY(40px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
      },
      animation: {
        fluidSlide: 'fluidSlide 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards',
      },
    },
  },
}

این امر به شما تسکین فوق العاده صاف می دهد ، با احترام به استانداردهای مدرن UI (به عنوان مثال ، منحنی های سرعت طراحی مواد).

مرحله 3: با motion-safe در نشانه گذاری شما

آن را کنار هم قرار دهید:

  
Hello, Smooth World
  
Animations that feel right — and respect your users.

اگر کاربر “کاهش حرکت” را فعال کند ، هیچ انیمیشن بازی نخواهد کرد – اما محتوا هنوز هم فوراً و تمیز ظاهر می شود.

اختیاری: لایه ای با تنظیمات برگزیده حرکت

شما حتی می توانید کاربرانی را که * به طور خاص * حرکت کاهش یافته را ترجیح می دهند هدف قرار دهید:

// tailwind.config.js
variants: {
  extend: {
    animation: ['motion-safe', 'motion-reduce'],
  },
}

  This will simply appear without animation if motion is reduced.

جوانب مثبت و منفی

✅ جوانب مثبت

• انطباق دسترسی به درجه یک بدون کتابخانه های اضافی
• کاهش فوق العاده مایع با حداقل کد CSS
• ضد آینده و به تنظیمات سطح سیستم عامل احترام می گذارد

⚠ منفی

• هنوز هم برای تعیین توالی چندین انیمیشن پیچیده به برخی از ظرافت ها نیاز دارد
• ترجیح می دهد کنترل سیستم بر کنترل طراح (یک طرفدار برای برخی ، یک نتیجه برای دیگران)

🚀 گزینه های دیگر

• حرکت فریمر: کتابخانه انیمیشن مبتنی بر واکنش کامل برای کنترل دقیق
• GSAP: اگر به جلوه های مبتنی بر فیزیک نیاز دارید ، موتور انیمیشن فوق العاده قدرتمند

خلاصه

انیمیشن های ایمن و ایمن ، دیگر یک لوکس نیستند-آنها یک پایه UX هستند. با پشتیبانی داخلی Tailwind از نمایش داده شدگان رسانه ای مانند prefers-reduced-motion و ترفندهای پیکربندی هوشمندانه ، می توانید بدون بیگانه کردن کاربران حساس ، تجربیات نرم و صاف را ارسال کنید. UI شما فقط یک دوستانه بسیار دوستانه تر شد.

اگر این موضوع را مفید دیدید ، می توانید از من در اینجا پشتیبانی کنید: buymeacoffee.com/hexshift