Not animations in Firefox 124

[andreww2012]

Hello.

In Firefox Developer Edition 124.0b7 (all extensions are disabled), the collapsible list started to open and close instantly, without any animations. You can check that on the Vue Collapsed site: https://vue-collapsed.pages.dev/. This does not happen in Firefox 123 or Chrome 122. That said, I only want to make you aware of that - I don't think there is something necessarily wrong with vue-collapsed: after a quick debugging I noticed that transitionend event no longer fires, which causes this behavior. The root cause might be a bug in a new Firefox or Vue.

[smastrom]

Yes you're right. I am having this issue as well since I updated my browser yesterday (as I mainly use Firefox).

From I quick debug, I think they changed the default transition string returned by getComputedStyle from all 0s ease 0s to all (when no transition is specified).

It will be fixed before today's evening.

In the meanwhile, you can workaround this bug by manually adding a transition to Collapse:

<Collapse class="Collapse">

.Collapse {
   transition: height 200ms ease-out;
}

[andreww2012]

Ah I see, this is indeed it. Thank you very much for the prompt answer and for the solution.
I am actually stuck on Vue 2.7, so I can't use this package as a dependency. I simply copy-pasted the code into my project, thus I don't even have to wait for the fix. 😄

That's how I fixed it:

diff --git a/packages/vue-collapsed/src/utils.ts b/packages/vue-collapsed/src/utils.ts
index 5642331..8bd49e9 100644
--- a/packages/vue-collapsed/src/utils.ts
+++ b/packages/vue-collapsed/src/utils.ts
@@ -15,13 +15,26 @@ export function getHeightProp(el: RefEl) {
    }
 }
 
+let defaultTransitionValue: string | undefined;
+function getDefaultTransitionValue() {
+   const tempElement = document.createElement('div');
+   document.body.append(tempElement);
+   const result = window.getComputedStyle(tempElement).transition;
+   tempElement.remove();
+
+   defaultTransitionValue = result;
+   return result;
+}
+
 export function getTransitionProp(el: RefEl) {
    if (!el.value) return {}
 
    const { transition } = getComputedStyle(el.value)
 
    // If transition is not defined, return the default one
-   if (transition === 'all 0s ease 0s') return { transition: DEFAULT_TRANSITION }
+   if (transition === (defaultTransitionValue ?? getDefaultTransitionValue())) {
+      return { transition: DEFAULT_TRANSITION }
+   }
 
    return { transition }
 }

[smastrom]

Fixed in v1.3.1