حل مشکل AnimatePresence و CSS Overflow Hidden

اگه تو پروژه‌هایی کار کردی که با انیمیشن‌ها و کتابخونه‌هایی مثل Framer Motion سر و کار داشتن، پس حتما با کلی مشکلات و چالش‌ها روبرو شدی. یکی از این چالش‌ها، مشکل تداخل برخود انیمیشن‌ها با CSS، به‌خصوص خاصیت overflow:hidden هست. اما نگران نباش، همیشه راه‌حلی هست!

اول از همه، بزار در مورد خاصیت overflow:hidden حرف بزنیم. کاری که می‌کنه اینه که همه‌ی محتوای اضافی که از باکس شما بیرون می‌زنه رو قایم می‌کنه. خیلی مفیده وقتی که می‌خوای از این بهم ریختگی‌ها دور بمونی. البته، وقتی که انیمیشن‌های خفن داری، این خاصیت می‌تونه باعث بشه که بعضی از انیمیشن‌ها درست کار نکنن و به این خاطر کمی آزاردهنده بشه.

حالا میریم سراغ AnimatePresence، که تو Framer Motion وجود داره. کار اصلیش اینه که مطمئن بشه انیمیشن‌ها قبل از اینکه کاملا از DOM حذف بشن، اجرا میشن. خیلی کاربریه زمانی که می‌خوای با انیمیشن‌های خروجی قشنگی کار کنی، اما گاهاً با مشکلاتی مثل همین CSS overflow:hidden مواجه میشه.

راه حل این مشکل، معمولاً اسکریپت‌پروری و دست‌کاری CSS به یه صورتیه که مطمئن بشیم انیمیشن‌ها به درستی اجرا میشن. اما همیشه باید مطمئن بشی که به صورت موثر و بدون کاهش پرفورمنس این کارو انجام میدی. تقریباً چیزی که باید بهش توجه کنی، اینه که ساختار DOM و انتظارات انیمیشنی که مدنظرته رو به یه طریقی تنظیم کنی که تداخلی نباشه.

نمونه کد و توضیحات

<style>
  .container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 300px;
  }
  .item {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: slideIn 1s forwards;
  }
  @keyframes slideIn {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
</style>

<div class="container">
  <div class="item">Hello, World!</div>
</div>

توضیحات خط به خط کد