رویداد transitionend
مثال (رویداد transitionend)
Do something with a <div> element when a CSS transition has ended:
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
خودتان امتحان کنید »
تعریف و کاربرد
The transitionend event occurs when a CSS transition has completed.
Note: If the transition is removed before completion, e.g. if the CSS transition-property property is removed, the transitionend event will not fire.
For more information about CSS Transitions, see our tutorial on CSS3 Transitions.
پشتیبانی مرورگرها
The numbers in the table specify the first browser version that fully supports the event.
Numbers followed by "webkit", "moz" or "o" specify the first version that worked with a prefix.
| Event | |||||
|---|---|---|---|---|---|
| transitionend | 26.0 4.0 as webkitTransitionEnd |
10.0 | 16.0 4.0 as mozTransitionEnd |
6.1 3.1 as webkitTransitionEnd |
12.1 10.5 as oTransitionEnd |
Note: For this event to work in Safari version 3.1 to 6.0, use the webkitTransitionEnd prefix.
نحوه استفاده
object.addEventListener("transitionend", myScript); // Standard syntax
Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.
جزئیات تکنیکی
| Bubbles: | بله |
|---|---|
| Cancelable: | بله |
| Event type: | TransitionEvent |
| DOM Version: | Level 3 Events |
آموزش های مرتبط
CSS Tutorial: CSS3 Transitions
CSS Reference: CSS3 transition Property
CSS Reference: CSS3 transition-property Property
مرجع کلیه رویدادهای JavaScript
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 5938
