refactor!: remove unnecessary subscription to animationend (#8633)

vaadin · Feb 4, 2025 · 469744e · 469744e
1 parent 96ea5f5
commit 469744e
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 34 deletions.
diff --git a/packages/form-layout/src/vaadin-form-layout-mixin.js b/packages/form-layout/src/vaadin-form-layout-mixin.js
@@ -108,8 +108,6 @@ export const FormLayoutMixin = (superClass) =>
       this.appendChild(this._styleElement);
 
       super.ready();
-
-      this.addEventListener('animationend', this.__onAnimationEnd);
     }
 
     constructor() {
@@ -270,13 +268,6 @@ export const FormLayoutMixin = (superClass) =>
       this._selectResponsiveStep();
     }
 
-    /** @private */
-    __onAnimationEnd(e) {
-      if (e.animationName.indexOf('vaadin-form-layout-appear') === 0) {
-        this._selectResponsiveStep();
-      }
-    }
-
     /** @private */
     _selectResponsiveStep() {
       // Iterate through responsiveSteps and choose the step

diff --git a/packages/form-layout/src/vaadin-form-layout-styles.js b/packages/form-layout/src/vaadin-form-layout-styles.js
@@ -9,7 +9,6 @@ export const formLayoutStyles = css`
   :host {
     display: block;
     max-width: 100%;
-    animation: 1ms vaadin-form-layout-appear;
     /* CSS API for host */
     --vaadin-form-item-label-width: 8em;
     --vaadin-form-item-label-spacing: 1em;
@@ -18,12 +17,6 @@ export const formLayoutStyles = css`
     align-self: stretch;
   }
 
-  @keyframes vaadin-form-layout-appear {
-    to {
-      opacity: 1 !important; /* stylelint-disable-line keyframe-declaration-no-important */
-    }
-  }
-
   :host([hidden]) {
     display: none !important;
   }

diff --git a/packages/form-layout/test/form-layout.test.js b/packages/form-layout/test/form-layout.test.js
@@ -458,26 +458,11 @@ describe('form layout', () => {
       layout = container.querySelector('vaadin-form-layout');
     });
 
-    it('should update steps on show after hidden', (done) => {
+    it('should update steps on show after hidden', async () => {
       const spy = sinon.spy(layout, '_selectResponsiveStep');
-      layout.addEventListener('animationend', () => {
-        expect(spy.called).to.be.true;
-        done();
-      });
-
+      await nextResize(layout);
       container.hidden = false;
-    });
-
-    it('should not update steps on custom animation name', (done) => {
-      const spy = sinon.spy(layout, '_selectResponsiveStep');
-      layout.addEventListener('animationend', () => {
-        expect(spy.called).to.be.false;
-        done();
-      });
-
-      const ev = new Event('animationend');
-      ev.animationName = 'foo';
-      layout.dispatchEvent(ev);
+      expect(spy).to.be.calledOnce;
     });
 
     it('should update layout when its parent becomes visible', async () => {