سبد (0)

رویداد animationiteration

مثال (رویداد animationiteration)

انجام عملیاتی بر روی یک عنصر <div> هنگامی که یک انیمیشن css تکرار می شود:

var x = document.getElementById("myDIV");

// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);

// Standard syntax
x.addEventListener("animationiteration", myRepeatFunction);

خودتان امتحان کنید »

تعریف و کاربرد

رویداد animationiteration زمانی روی می دهد که یک انیمیشن css تکرار شود.

اگر که خصوصیت animation-iteration-count  را برابر با 1 قرار دهیم، بدین معنی است که انیمیشن تنها یک بار اجرا خواهد شد و این باعث خواهدشد که رویداد animationiteration روی ندهد. برای روی دادن این رویداد لازم است که انیمیشن بیش از یک بار اجرا شود.

برای اطلاعات بیشتر در مورد انیمیشن های css آموزشِ CSS3 Animations را مطالعه کنید.

هنگامی که یک انیمیشن css اجرا می شود، سه رویداد وجود دارد که می تواند اتفاق بیافتد:

  • animationstart: هنگامی روی می دهد که، انیمیشن css مورد نظر شروع شود.
  • animationiteration: هنگامی روی می دهد که، یک انیمیشن css تکرار شود.
  • animationend: هنگامی روی می دهد که، یک انیمیشن css به پایان برسد.

پشتیبانی مرورگرها

اعداد داخل جدول زیر نشان دهنده ی اولین ورژن مرورگری است که به طور کامل از این رویداد پشتیبانی می کند.

اعدادی که با پسوندهای webkit یا moz دنبال شده اند، اولین ورژنی را مشخص می کنند که با این پسوند کار می کنند.

Event     
animationiteration 4.0 webkit 10.0  16.0
5.0 moz
4.0 webkit 15.0 webkit
12.1

نکته: برای مرورگرهای chrome و safari و opera می توانید از پسوند webkitAnimationIteration استفاده کنید.


نحوه استفاده

object.addEventListener("webkitAnimationIteration", myScript);  // Code for Chrome, Safari and Opera
object
.addEventListener("animationiteration", myScript);        // Standard syntax

نکته: متد addEventListener() در Internet Explorer 8 و ورژن های پایین تر از آن پشتیبانی نمی شود.


جزئیات تکنیکی

Bubbles: بله
Cancelable: خیر
Event type: AnimationEvent
DOM Version: Level 3 Events

آموزش های مرتبط

CSS Tutorial: CSS3 Animations

CSS Reference: CSS3 animation Property

CSS Reference: CSS3 animation-iteration-count Property

مرجع مدل DOM در اچ تی ام ال Style animation Property


مرجع کلیه رویدادهای JavaScript Reference مرجع کلیه رویدادهای JavaScript


تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه