متحرک سازی با TailwindCSS – انجمن DEV

Summarize this content to 400 words in Persian Lang
هنگامی که صحبت از افزایش تجربه کاربر در برنامه های کاربردی وب می شود، انیمیشن ها نقشی اساسی دارند. TailwindCSS روند افزودن انیمیشن ها را ساده می کند، اما اگر بیشتر از گزینه های اصلی بخواهید چه؟ در این مقاله، من شما را از طریق گسترش انیمیشن‌های TailwindCSS راهنمایی می‌کنم، به شما این امکان را می‌دهد که انیمیشن‌های سفارشی و پویا را بدون تکیه بر CSS سفارشی ایجاد کنید.

درک انیمیشن های TailwindCSS

TailwindCSS چهار انیمیشن اصلی را ارائه می دهد: چرخش، پینگ، پرش و پالس. اجرای این انیمیشن ها ساده است، اما اغلب فاقد جزئیات و کنترلی هستند که توسعه دهندگان می خواهند. در حالی که این گزینه‌های پیش‌فرض راحت هستند، ممکن است متوجه شوید که به انیمیشن‌های پیچیده‌تر متناسب با نیازهای منحصر به فرد برنامه‌تان نیاز دارید.

نیاز به سفارشی سازی

در بسیاری از موارد، توسعه‌دهندگان می‌خواهند انیمیشن‌ها را تغییر دهند، مانند تغییر سرعت یا اعمال افکت‌های منحصربه‌فرد مانند “wiggle”. خبر خوب این است که TailwindCSS امکان سفارشی سازی از طریق فایل پیکربندی را فراهم می کند و به شما امکان می دهد انیمیشن های جدید اضافه کنید و ویژگی های آنها را تعریف کنید.

راه اندازی انیمیشن های توسعه یافته

برای شروع، باید فایل پیکربندی TailwindCSS خود را پیدا کنید (معمولا tailwind.config.js). در اینجا یک فرآیند گام به گام برای گسترش انیمیشن های اصلی آورده شده است.

مرحله 1: اضافه کردن یک انیمیشن جدید

فرض کنید می‌خواهید یک نسخه آهسته‌تر از انیمیشن چرخش ایجاد کنید، که ما آن را صدا می‌زنیم spin-slow. با دسترسی به فایل پیکربندی Tailwind خود شروع می کنید:

module.exports = {
theme: {
extend: {
animation: {
‘spin-slow’: ‘spin 1s linear infinite’,
}
}
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، ما به انیمیشن چرخشی موجود اشاره کرده‌ایم و مدت زمان آن را با حفظ یک کاهش خطی روی یک ثانیه تنظیم کرده‌ایم.

مرحله 2: ایجاد انیمیشن های منحصر به فرد

فراتر از اصلاح انیمیشن‌های موجود، می‌توانید انیمیشن‌های کاملاً جدیدی مانند افکت «wiggle» ایجاد کنید. برای انجام این کار، فریم های کلیدی را در پیکربندی Tailwind خود تعریف می کنید:

module.exports = {
theme: {
extend: {
animation: {
wiggle: ‘wiggle 1s ease-in-out infinite’,
},
keyframes: {
wiggle: {
‘0%, 100%’: { transform: ‘rotate(-9deg)’ },
‘50%’: { transform: ‘rotate(9deg)’ },
},
},
},
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این پیکربندی یک انیمیشن حرکتی را معرفی می‌کند که یک عنصر را به جلو و عقب می‌چرخاند.

تقویت انیمیشن ها با پلاگین ها

اگرچه انیمیشن‌های پیش‌فرض TailwindCSS مفید هستند، اما ممکن است تمام نیازهای شما را پوشش ندهند، مانند تنظیم زمان انیمیشن، تأخیر، یا حتی کنترل وضعیت‌های پخش. اینجاست که پلاگین ها وارد عمل می شوند.

نصب پلاگین TailwindCSS Animate

برای کنترل بیشتر روی انیمیشن ها، می توانید از افزونه TailwindCSS Animate استفاده کنید. برای نصب این افزونه مراحل زیر را دنبال کنید:

افزونه را از طریق npm نصب کنید:

npm install tailwindcss-animate

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

افزونه را به پیکربندی Tailwind خود اضافه کنید:

module.exports = {
plugins: [
require(‘tailwindcss-animate’),
],
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این افزونه عملکرد TailwindCSS را گسترش می دهد و به شما این امکان را می دهد که مدت زمان انیمیشن، تاخیرها و حالت های پخش را به راحتی تعریف کنید.

پیاده سازی ویژگی های پیشرفته انیمیشن

پس از نصب افزونه، می توانید از آن برای تعریف ویژگی هایی مانند مدت زمان و تاخیر به طور مستقیم در HTML خود استفاده کنید:

class=”animate-wiggle duration-75 delay-1000″>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این مثال انیمیشن wiggle را با مدت زمان 75 میلی ثانیه و تاخیر یک ثانیه اعمال می کند.

مدیریت ایالات انیمیشن

یکی از قدرتمندترین ویژگی های افزونه انیمه امکان کنترل اجرای یا توقف یک انیمیشن است. با تغییر دادن کلاس‌ها، می‌توانید انیمیشن‌ها را بر اساس تعاملات کاربر متوقف کنید و تجربه تعاملی را افزایش دهید.

مثال: تغییر حالت های انیمیشن

let isRunning = true;

const toggleAnimation = () => {
isRunning = !isRunning;
document.querySelector(‘.animate-wiggle’).classList.toggle(‘paused’, !isRunning);
document.querySelector(‘.animate-wiggle’).classList.toggle(‘running’, isRunning);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این قطعه کد اجازه می دهد تا یک انیمیشن با یک کلیک متوقف شود یا از سر گرفته شود و یک عنصر رابط کاربری پویا ارائه شود.

با من ارتباط برقرار کن

اگر این مقاله را دوست دارید، حتما نظر خود را بنویسید. این روز من را خواهد ساخت!

اگر می خواهید مطالب دیگری از من بخوانید، می توانید به وبلاگ شخصی من سر بزنید.

اگر می خواهید با من ارتباط برقرار کنید می توانید به من پیام دهید توییتر/X.

شما همچنین می توانید موارد دیگری را که من در حال انجام هستم در اینجا بررسی کنید

module.exports = {
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 1s linear infinite',
      }
    }
  }
}

module.exports = {
  theme: {
    extend: {
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
      },
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-9deg)' },
          '50%': { transform: 'rotate(9deg)' },
        },
      },
    },
  }
}

   npm install tailwindcss-animate

   module.exports = {
     plugins: [
       require('tailwindcss-animate'),
     ],
   }

 class="animate-wiggle duration-75 delay-1000">

let isRunning = true;

const toggleAnimation = () => {
  isRunning = !isRunning;
  document.querySelector('.animate-wiggle').classList.toggle('paused', !isRunning);
  document.querySelector('.animate-wiggle').classList.toggle('running', isRunning);
};