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