مدیریت رفتارهای غیرمنتظره با رویداد onanimationend جاوااسکریپت

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

برای شروع، باید بدانیم که onanimationend چگونه کار می‌کند. زمانی که یک انیمیشن CSS به پایان می‌رسد، این رویداد به صورت خودکار فعال می‌شود و می‌توانیم با استفاده از جاوااسکریپت کدهایی را اجرا کنیم که به دنبال این رویداد نوشته شده‌اند. این به ویژه زمانی مفید است که می‌خواهیم عملیاتی را بلافاصله بعد از پایان انیمیشن اجرا کنیم، مثلا پاک کردن عناصر DOM، اضافه کردن یا حذف کلاس‌ها، یا بروز رسانی محتوای صفحه.

در ادامه مثالی از نحوه استفاده از onanimationend را مشاهده می‌کنید:

<style>
  .fade-out {
    animation: fadeOut 2s;
  }
  @keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }
</style>
<div id="myElement" class="fade-out">این یک عنصر تست است</div>
<script>
  document.getElementById('myElement').addEventListener('animationend', function() {
    this.style.display = 'none';
    console.log('انیمیشن به پایان رسید، عنصر پنهان شد.');
  });
</script>

ابتدا، ما یک سبک CSS با یک انیمیشن به نام fadeOut ایجاد کرده‌ایم که عنصر را در طی ۲ ثانیه، شفاف‌تر می‌کند تا پنهان شود.

عنصری با متن «این یک عنصر تست است» ساخته‌ایم که کلاس fade-out را دارد، بنابراین انیمیشن به آن اعمال می‌شود.

در بخش جاوااسکریپت، با استفاده از addEventListener به عنصر یک شنونده رویداد animationend اضافه کرده‌ایم. زمانی که انیمیشن پایان می‌یابد، عنصر پنهان می‌شود و پیامی در کنسول نمایش داده می‌شود.

این کد به سادگی نشان می‌دهد که چگونه می‌توانیم با پایان انیمیشن‌ها از onanimationend استفاده کنیم تا عملکردهای خاصی را اجرا کنیم، که به ما امکان می‌دهد تا تعاملات پویا و حرفه ای تری در صفحات وب ایجاد کنیم.