رویداد animationiteration
مثال (رویداد animationiteration)
انجام عملیاتی بر روی یک عنصر <div> هنگامی که یک انیمیشن css تکرار می شود:
// 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("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
- نوشته شده توسط احسان عباسی
- بازدید: 4970
