Bug - x-collapse flickering (#2441)

* Fix flickering bug

* Update tests (properties order has changed)

packages/collapse/src/index.js

@@ -17,11 +17,10 @@ export default function (Alpine) {
         let setFunction = (el, styles) => {
             let revertFunction = Alpine.setStyles(el, styles);
 
-           return styles.height ? () => {} : revertFunction
+            return styles.height ? () => {} : revertFunction
         }
 
         let transitionStyles = {
-            overflow: 'hidden',
             transitionProperty: 'height',
             transitionDuration: `${duration}s`,
             transitionTimingFunction: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
@@ -30,27 +29,25 @@ export default function (Alpine) {
         el._x_transition = {
             in(before = () => {}, after = () => {}) {
                 el.hidden = false;
+                el.style.display = null
 
                 let current = el.getBoundingClientRect().height
 
-                Alpine.setStyles(el, {
-                    display: null,
-                    height: 'auto',
-                })
+                el.style.height = 'auto'
 
                 let full = el.getBoundingClientRect().height
 
-                Alpine.setStyles(el, {
-                    overflow: null
-                })
-
                 if (current === full) { current = floor }
 
                 Alpine.transition(el, Alpine.setStyles, {
                     during: transitionStyles,
                     start: { height: current+'px' },
                     end: { height: full+'px' },
-                }, () => el._x_isShown = true, () => {})
+                }, () => el._x_isShown = true, () => {
+                    if (el.style.height == `${full}px`) {
+                        el.style.overflow = null
+                    }
+                })
             },
 
             out(before = () => {}, after = () => {}) {
@@ -60,18 +57,13 @@ export default function (Alpine) {
                     during: transitionStyles,
                     start: { height: full+'px' },
                     end: { height: floor+'px' },
-                }, () => {}, () => {
+                }, () => el.style.overflow = 'hidden', () => {
                     el._x_isShown = false
 
                     // check if element is fully collapsed
                     if (el.style.height == `${floor}px`) {
-                        Alpine.nextTick(() => {
-                            Alpine.setStyles(el, {
-                                display: 'none',
-                                overflow: 'hidden'
-                            })
-                            el.hidden = true;
-                        })
+                        el.style.display = 'none'
+                        el.hidden = true
                     }
                 })
             },

tests/cypress/integration/plugins/collapse.spec.js

@@ -16,7 +16,7 @@ test('can collapse and expand element',
         get('h1').should(notHaveAttribute('hidden'))
         get('button').click()
         get('h1').should(haveComputedStyle('height', '0px'))
-        get('h1').should(haveAttribute('style', 'height: 0px; display: none; overflow: hidden;'))
+        get('h1').should(haveAttribute('style', 'height: 0px; overflow: hidden; display: none;'))
         get('h1').should(haveAttribute('hidden', 'hidden'))
     },
 )
@@ -64,7 +64,7 @@ test('double-click on x-collapse does not mix styles up',
         get('h1').should(haveAttribute('style', 'display: none; height: 0px; overflow: hidden;'))
         get('button').click()
         get('button').click()
-        get('h1').should(haveAttribute('style', 'height: 0px; display: none; overflow: hidden;'))
+        get('h1').should(haveAttribute('style', 'height: 0px; overflow: hidden; display: none;'))
         get('button').click()
         get('h1').should(haveAttribute('style', 'height: auto;'))
         get('button').click()