@pacem/pacem 1.0.5-fermi → 1.0.6-laplace

package/dist/browser/pacem-ui.js

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem v1.0.5-fermi (https://js.pacem.it)
+ * @pacem/pacem v1.0.6-laplace (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -1146,10 +1146,16 @@
         }
     }
     const UI_BINDERS = 'pacem:components:ui:binders';
-    /** Tracks the {@link PacemBinderElement} instances bound to a single endpoint element, refreshing them all on that element's resize/reposition. */
+    /** Tracks the {@link PacemBinderElement} instances bound to a single endpoint element, refreshing them all on that element's resize/reposition (or as soon as it stops animating). */
     class BindersCollector {
         constructor(element) {
             this.binders = [];
+            /** Refreshes the bound binders against the target's latest known size. */
+            this.refresh = () => {
+                for (var binder of this.binders) {
+                    binder.refresh(this.resize.target, this.resize.currentSize);
+                }
+            };
             this.fire = (evt) => {
                 for (var binder of this.binders) {
                     binder.refresh(this.resize.target, evt.detail);
@@ -1159,6 +1165,11 @@
             watcher.target = element;
             watcher.watchPosition = true;
             document.body.appendChild(watcher);
+            // an element might turn visible leaving its size and position untouched - e.g. while fading in -
+            // and binders skip invisible endpoints (see `_draw`): they need a nudge once the animation is over.
+            if (element instanceof HTMLElement || element instanceof SVGElement) {
+                pacemCore.Utils.addAnimationEndCallback(element, this.refresh);
+            }
         }
         dispose() {
             this.resize.remove();