refactor: wait for animation completion using Animation API (#10510)

Author: vursen

packages/app-layout/src/vaadin-app-layout-mixin.js

@@ -393,22 +393,11 @@ export const AppLayoutMixin = (superclass) =>
     /**
      * Returns a promise that resolves when the drawer opening/closing CSS transition ends.
      *
-     * The method relies on the `--vaadin-app-layout-transition-duration` CSS variable to detect whether
-     * the drawer has a CSS transition that needs to be awaited. If the CSS variable equals `0s`,
-     * the promise resolves immediately.
-     *
      * @return {Promise}
      * @private
      */
     __drawerTransitionComplete() {
-      return new Promise((resolve) => {
-        if (this._getCustomPropertyValue('--vaadin-app-layout-transition-duration') === '0s') {
-          resolve();
-          return;
-        }
-
-        this.$.drawer.addEventListener('transitionend', resolve, { once: true });
-      });
+      return Promise.all(this.$.drawer.getAnimations().map((animation) => animation.finished));
     }
 
     /** @private */