fix(StepIndicator): fix height animation issue when CSS is loaded too…

… slow (#1221)
dnbexperience · Jan 31, 2022 · 8dfdd7e · 8dfdd7e
1 parent 6b5ddcf
commit 8dfdd7e
Show file tree

Hide file tree

Showing 4 changed files with 234 additions and 183 deletions.
diff --git a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorTriggerButton.js b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorTriggerButton.js
@@ -51,6 +51,7 @@ export default class StepIndicatorTriggerButton extends React.PureComponent {
 
   componentDidMount() {
     this._heightAnim.setElement(this._buttonRef.current)
+    this._prevStep = this.context.activeStep
   }
 
   componentWillUnmount() {
@@ -61,14 +62,9 @@ export default class StepIndicatorTriggerButton extends React.PureComponent {
     if (this._prevStep !== this.context.activeStep) {
       const toHeight = this._heightAnim.getUnknownHeight()
 
-      // make animation smooth
-      // because we set the height before requestAnimationFrame
-      // also, to ensure smoothness, the parent li wrapper (&__trigger) needs flex column
-      this._heightAnim.adjustFrom(height)
-
       this._heightAnim.adjustTo(height, toHeight)
+      this._prevStep = this.context.activeStep
     }
-    this._prevStep = this.context.activeStep
   }
 
   render() {

diff --git a/...-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap b/...-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap
@@ -2171,7 +2171,6 @@ Array [
                   aria-describedby="unique-id-loose-snapshot-overview"
                   class="dnb-button dnb-button--secondary dnb-button--has-text dnb-step-indicator__trigger__button dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-medium dnb-button--stretch dnb-button--wrap"
                   id="unique-id-loose-snapshot"
-                  style="height: auto;"
                   type="button"
                 >
                   <span
@@ -2288,7 +2287,6 @@ Array [
                       aria-describedby="unique-id-loose-snapshot-overview"
                       class="dnb-button dnb-button--secondary dnb-button--has-text dnb-step-indicator__trigger__button dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-medium dnb-button--stretch dnb-button--wrap"
                       id="unique-id-loose-snapshot"
-                      style="height: auto;"
                       type="button"
                     >
                       <span
@@ -2402,7 +2400,6 @@ Array [
                           aria-describedby="unique-id-loose-snapshot-overview"
                           class="dnb-button dnb-button--secondary dnb-button--has-text dnb-step-indicator__trigger__button dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-medium dnb-button--stretch dnb-button--wrap"
                           id="unique-id-loose-snapshot"
-                          style="height: auto;"
                           type="button"
                         >
                           <span
@@ -4787,7 +4784,6 @@ Array [
                   aria-describedby="unique-id-static-snapshot-overview"
                   class="dnb-button dnb-button--secondary dnb-button--has-text dnb-step-indicator__trigger__button dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-medium dnb-button--stretch dnb-button--wrap"
                   id="unique-id-static-snapshot"
-                  style="height: auto;"
                   type="button"
                 >
                   <span
@@ -4904,7 +4900,6 @@ Array [
                       aria-describedby="unique-id-static-snapshot-overview"
                       class="dnb-button dnb-button--secondary dnb-button--has-text dnb-step-indicator__trigger__button dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-medium dnb-button--stretch dnb-button--wrap"
                       id="unique-id-static-snapshot"
-                      style="height: auto;"
                       type="button"
                     >
                       <span
@@ -5018,7 +5013,6 @@ Array [
                           aria-describedby="unique-id-static-snapshot-overview"
                           class="dnb-button dnb-button--secondary dnb-button--has-text dnb-step-indicator__trigger__button dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-medium dnb-button--stretch dnb-button--wrap"
                           id="unique-id-static-snapshot"
-                          style="height: auto;"
                           type="button"
                         >
                           <span
@@ -7417,7 +7411,6 @@ Array [
                   aria-describedby="unique-id-strict-snapshot-overview"
                   class="dnb-button dnb-button--secondary dnb-button--has-text dnb-step-indicator__trigger__button dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-medium dnb-button--stretch dnb-button--wrap"
                   id="unique-id-strict-snapshot"
-                  style="height: auto;"
                   type="button"
                 >
                   <span
@@ -7534,7 +7527,6 @@ Array [
                       aria-describedby="unique-id-strict-snapshot-overview"
                       class="dnb-button dnb-button--secondary dnb-button--has-text dnb-step-indicator__trigger__button dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-medium dnb-button--stretch dnb-button--wrap"
                       id="unique-id-strict-snapshot"
-                      style="height: auto;"
                       type="button"
                     >
                       <span
@@ -7648,7 +7640,6 @@ Array [
                           aria-describedby="unique-id-strict-snapshot-overview"
                           class="dnb-button dnb-button--secondary dnb-button--has-text dnb-step-indicator__trigger__button dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-medium dnb-button--stretch dnb-button--wrap"
                           id="unique-id-strict-snapshot"
-                          style="height: auto;"
                           type="button"
                         >
                           <span

diff --git a/packages/dnb-eufemia/src/shared/AnimateHeight.js b/packages/dnb-eufemia/src/shared/AnimateHeight.js
@@ -50,6 +50,14 @@ export default class AnimateHeight {
       this.onCloseEnd = null
     }
   }
+  _emitTransitionEnd() {
+    try {
+      const event = new CustomEvent('transitionend')
+      this.elem.dispatchEvent(event)
+    } catch (e) {
+      warn(e)
+    }
+  }
 
   // Public methods
   setElement(elem, container = null) {
@@ -127,24 +135,20 @@ export default class AnimateHeight {
     this.onEndStack.push(fn)
   }
   start(fromHeight, toHeight, { animate = true } = {}) {
-    try {
-      if (window.location.href.includes('data-visual-test')) {
-        animate = false
-      }
-    } catch (e) {
-      //
+    if (window?.location?.href?.includes('data-visual-test')) {
+      animate = false
     }
 
-    if (animate === false || this.opts?.animate === false) {
+    if (
+      fromHeight === toHeight ||
+      animate === false ||
+      this.opts?.animate === false
+    ) {
       this.elem.style.height = `${toHeight}px`
+
       this._callOnStart()
 
-      try {
-        const event = new CustomEvent('transitionend')
-        this.elem.dispatchEvent(event)
-      } catch (e) {
-        warn(e)
-      }
+      this._emitTransitionEnd()
 
       return // stop here
     }