پیاده‌سازی Toggle حالت شب به‌صورت انیمیشنی

اگر قبلاً برنامه‌نویسی وب کار کرده باشید و یا با مباحث برنامه‌نویسی موبایل آشنایی داشته باشید، قطعاً می‌دانید Toggle چیست. Toggle المانی بسیار کاربردی در طراحی واسط کاربری می‌باشد که مثل یک متغیر Boolean دو حالت دارد. با کلیک بر روی این المان می‌توانید آپشنی را فعال یا غیرفعال کنید. در این پست از بلاگ پلازیکا می‌خواهیم به شما آموزش دهیم که یک Toggle برای فعال کردن Dark mode (حالت شب) بسازید.

کد HTML

فهمیدن کد HTML این پروژه کوچک و جمع و جور بسیار ساده است. فقط کافی است یک کانتینر (container) برای آیکون‌ها بسازید (لینک آیکون‌ها: fontawesome) و تگ‌هایdiv که شامل آیکون‌ها هستند را در این کانتینر قرار دهید.

<div class=&quotcontainer&quot>

   <div class=&quotsun sun-logo&quot>

      <i class=&quotfas fa-sun&quot></i>

   </div>

   <div class=&quotmoon moon-logo&quot>

      <i class=&quotfas fa-moon&quot></i>

   </div>

</div>

کد CSS

.container{

    position: relative;

}

.sun, .moon{

    font-size: 10rem;

    width: fit-content;

    height: fit-content;

}

.moon{

    position: absolute;

    inset: 0;

}

موقعیت کانتینر را روی relative قرار دهید. موقعیت کانتینر moon باید absolute باشد. زیرا می‌خواهیم موقعیت آیکون ماه دقیقاً روی موقعیت آیکون خورشید باشد.
قسمت جالب اینجاست. به جای استفاده از top: 0;، bottom: 0;، left: 0; وright: 0; می‌توانید از inset: 0; استفاده کنید و همان نتیجه را بگیرید. جالب نیست؟!
همچنین height و width کانتینر خورشید و ماه را روی fit-content قرار می‌دهیم. این کار باعث می‌شود طول و عرض کانتینر با طول و عرض آیکون‌های داخل آن همخوانی داشته باشد.
در ادامه برای تغییر اندازه آیکون‌ها font-size آیکون‌ها را تغییر می‌دهیم.

.moon-logo{
    opacity: 0;
    transform: translateY(20%) rotateZ(50deg);
}

سپس موقعیت و وضوح اولیه آیکون ماه را برای اولین رندر صفحه سایت تنظیم می‌کنیم. از آنجایی که در هنگام ورود به صفحه toggle به‌صورت پیش‌فرض در حالت روز قرار دارد، وضوح اولیه آیکون ماه صفر می‌باشد.
اعلان translateY(20%) بیست درصد انحراف آیکون ماه به سمت پایین را توسط المان والدش خنثی می‌کند.
به همین ترتیب اعلان rotateZ(50deg) آیکون ماه را در طول محور Zها پنجاه درجه چرخش می‌دهد.

.sun-logo{

    opacity: 1;

    transform: translateY(0) rotateZ(0deg);

}

به همین ترتیب ویژگی‌های اولیه آیکون خورشید را نیز مقداردهی می‌کنیم.

.animate-sun{

    opacity: 0;

    transform: translateY(20%) rotateZ(100deg);

    color: aliceblue;

}

حالا ویژگی‌های نهایی آیکون خورشید را به‌گونه‌ای تنظیم می‌کنیم که قرار است به آن حالت درآید.

.animate-moon{

    opacity: 1;

    transform: translateY(0%) rotateZ(0deg);

    color: aliceblue;

}

همچنین ویژگی‌های آیکون ماه را هم به‌گونه‌ای تنظیم می‌کنیم که قرار است به آن حالت درآید. نکته قابل توجه اینکه رنگ پیش‌فرض آیکون‌ها black است. پس اگر می‌خواهید که رنگ آیکون‌ها را تغییر دهید، ویژگی color را به دلخواه خود تنظیم کنید.
صبر کنید! هنوز از ویژگی transition استفاده نکرده‌ایم. بدون transition چطور قرار است Toggle ما از حالتی به حالت دیگر برود؟

.moon-logo{

    opacity: 0;

    transform: translateY(20%) rotateZ(50deg);

    transition: all 1s ease-out;

}

.sun-logo{

    opacity: 1;

    transform: translateY(0) rotateZ(0deg);

    transition: all 1s ease-out;

}

body{

    transition: background-color 1s;

}

.dark{

    background-color: black;

}

از کلاس بالا برای تغییر background-color در هنگام تغییر حالت آیکون‌ها استفاده می‌کنیم.
خب، کدهای CSS ما آماده هستند. بریم سراغ کدهای جاوا اسکریپت. می‌خواهیم از کدهای جاوا اسکریپت برای toggle کردن کلاس‌ها در رخداد click استفاده کنیم.

جاوا اسکریپت

body{

    transition: background-color 1s;

}

.dark{

    background-color: black;

}

به المان کانتینر یک eventListener اضافه می‌کنیم تا وقتی روی کانتینر کلیک می‌کنیم، کلاس‌های CSS را به المان‌های مورد نظر ما تغییر دهد.
این کار باعث می‌شود که اگر کلاس CSS مربوطه در classList یک المان نباشد، تابع toggle کلاس CSS را به classList المان مربوطه اضافه کند و اگر کلاس CSS در classListالمان وجود دارد، آن را حذف کند.
classList در واقع یک DOMTokenList است که وارد جزئیات آن نمی‌شویم.
این هم از خروجی کدهای ما:

امیدواریم آموزش پیاده‌سازی Toggle حالت شب به‌صورت انیمیشنی برای شما مفید باشد. اگر این آموزش را دوست داشتید، احتمالا از این پست هم خوشتان خواهد آمد: چطور یک سرچ باکس متحرک بسازیم؟

از قسمت نظرات برایمان بگویید که چه آموزش‌هایی به درد شما می‌خورد؟ و ما در عوض تلاش می‌کنیم بهترین مرجع شما برای برنامه‌نویسی باشیم.
منبع: Dark mode toggle animation using CSS!