waitTransitionendEvent

waitTransitionendEvent.ts

/**
 * Elementのtransitionendイベントが発火すると解決するPromiseです。
 * propertyNameを指定した場合は、該当propertyのtransitionendのみを待ちます。
 * @param element
 * @param propertyName
 */
export const waitTransitionendEvent = async (
  element: Element | null,
  propertyName?: keyof CSSStyleDeclaration
): Promise<void> => {
  if (element == null) {
    return;
  }

  new Promise(resolve => {
    const transitionEndListener = (event: Event | TransitionEvent) => {
      if (
        propertyName != null &&
        "propertyName" in event &&
        propertyName !== event.propertyName
      ) {
        return;
      }

      element.removeEventListener("transitionend", transitionEndListener);
      resolve();
    };

    element.addEventListener("transitionend", transitionEndListener, {
      once: true
    });
  });
};