( event: AnimationEvent | TransitionEvent, nativeElement: HTMLElement, )
| 327 | * @returns |
| 328 | */ |
| 329 | export function isLongestAnimation( |
| 330 | event: AnimationEvent | TransitionEvent, |
| 331 | nativeElement: HTMLElement, |
| 332 | ): boolean { |
| 333 | const longestAnimation = longestAnimations.get(nativeElement); |
| 334 | // If we don't have any record of a longest animation, then we shouldn't |
| 335 | // block the animationend/transitionend event from doing its work. |
| 336 | if (longestAnimation === undefined) return true; |
| 337 | |
| 338 | if (nativeElement !== getEventTarget(event)) return false; |
| 339 | |
| 340 | // Distinct CSS animations can share a name. Chrome 151 stable exposes their instance: |
| 341 | // https://developer.chrome.com/release-notes/151#animation_accessor_on_animation_and_transition_events |
| 342 | const eventAnimation = ( |
| 343 | event as (AnimationEvent | TransitionEvent) & {readonly animation?: Animation | null} |
| 344 | ).animation; |
| 345 | |
| 346 | // Compare the event animation's duration instead of retaining the Animation object. This also |
| 347 | // disambiguates records obtained from computed styles when getAnimations() was empty. |
| 348 | if (eventAnimation) { |
| 349 | const eventAnimationDuration = getAnimationDuration(eventAnimation); |
| 350 | // CSSOM can round serialized times while Web Animations retains more precision. Only reject an |
| 351 | // event when it is shorter by more than the tolerance so the longest event is not ignored. |
| 352 | if ( |
| 353 | eventAnimationDuration !== undefined && |
| 354 | eventAnimationDuration + ANIMATION_DURATION_TOLERANCE_MS < longestAnimation.duration |
| 355 | ) { |
| 356 | return false; |
| 357 | } |
| 358 | } |
| 359 | |
| 360 | // Fall back to strings for older browsers. |
| 361 | if (longestAnimation.animationName !== undefined) { |
| 362 | return (event as AnimationEvent).animationName === longestAnimation.animationName; |
| 363 | } |
| 364 | |
| 365 | if (longestAnimation.propertyName !== undefined) { |
| 366 | return ( |
| 367 | longestAnimation.propertyName === 'all' || |
| 368 | (event as TransitionEvent).propertyName === longestAnimation.propertyName |
| 369 | ); |
| 370 | } |
| 371 | |
| 372 | return false; |
| 373 | } |
| 374 | |
| 375 | /** |
| 376 | * Stores a given animation function in the LView's animation map for later execution |
no test coverage detected