رویداد animationend
مثال (رویداد animationend)
انجام عملیاتی بر روی یک عنصر <div> هنگامی که یک انیمیشن به پایان می رسد:
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Standard syntax
x.addEventListener("animationend", myEndFunction);
خودتان امتحان کنید »
تعریف و کاربرد
رویداد animationend زمانی روی می دهد که، یک انیمیشن کامل شود.
برای اطلاعات بیشتر درباره ی انیمیشن های css آموزش های CSS3 Animations را ببینید.
هنگامی که یک انیمیشن css اجرا می شود، سه رویداد وجود دارد که می تواند اتفاق بیافتد:
- animationstart: هنگامی روی می دهد که انیمیشن css مورد نظر شروع شود.
- animationiteration: هنگامی روی می دهد که یک انیمیشن css تکرار شود.
- animationend: زمانی روی می دهد که یک انیمیشن css به پایان برسد.
پشتیبانی مرورگرها
اعداد داخل جدول زیر نشان دهنده ی اولین ورژن مرورگری است که به طور کامل از این رویداد پشتیبانی می کند.
اعدادی که با پسوند های webkit یا moz دنبال شده اند، اولین ورژنی را مشخص می کنند که با این پسوند کار می کند.
| Event | |||||
|---|---|---|---|---|---|
| animationend | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
نکته: برای مرورگرهای chrome و safari و opera می توانید از پسوند webkitAnimationEnd استفاده کنید.
نحوه استفاده
object.addEventListener("animationend", 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
مرجع مدل DOM در اچ تی ام ال Style animation Property
مرجع کلیه رویدادهای JavaScript
- نوشته شده توسط احسان عباسی
- بازدید: 5107
