[Slideover/Modal] Enter transition not working

fabianbeier commented 2 months ago

Environment

Operating System: Darwin
Node Version: v18.18.2
Nuxt Version: 3.13.1
CLI Version: 3.13.1
Nitro Version: 2.9.7
Package Manager: bun@1.1.24
Builder: -
User Config: devtools, modules, eslint, runtimeConfig, site, mdc, image, components, strapi, i18n, vite, routeRules, formkit, compatibilityDate
Runtime Modules: @nuxtjs/strapi@1.12.0, @nuxt/image@1.8.0, @vueuse/nuxt@10.11.1, @nuxtjs/i18n@8.5.1, @nuxt/eslint@0.3.13, @nuxt/fonts@0.7.2, @nuxtjs/mdc@0.8.3, @formkit/nuxt@1.6.5, nuxt3-vuex-module@1.1.0, nuxt3-interpolation/index.cjs, nuxt-swiper@1.2.2, nuxt-marquee@1.0.4, @nuxtjs/seo@2.0.0-rc.20, @formkit/nuxt@1.6.5, @nuxt/ui@2.18.4
Build Modules: -

Version

v2.18.4

Reproduction

https://stackblitz.com/edit/github-dbk9vy?file=app.vue

Description

Enter transition of sliderover Module not working properly. Instant appearing of elements (with sometimes slight but too quick transitions). Exit transition works fine.

Tried on Chrome, Firefox & Safari on Mac.

Additional context

No response

Logs

No response

bikalpabhurtel commented 1 month ago

I'm encountering this issue too. The entry transition of Modal is also not working.

Environment

Operating System: Ubuntu 22.04 LTS
Node Version: v20.14.0
Nuxt Version: 3.13.1
CLI Version: 3.13.1
Nitro Version: 2.9.7
Package Manager: pnpm@9.4.0

KonradDRAST commented 1 month ago

Same here. App was working fine a few weeks back, but I updated packages this morning and suddenly entry transition is gone.

My Env:

Operating System: Windows_NT
Node Version: v20.10.0
Nuxt Version: 3.13.1
CLI Version: 3.13.1
Nitro Version: 2.9.7
Package Manager: yarn@4.3.0

gilguo95 commented 1 month ago

Same here. The enter transition is either NOT WORKING AT ALL or VERY GLITCHY WITH FLICKERS. But I found that the situation only happens on chrome (macOS version, iOS version is fine). It also works fine on safari. Maybe it's a chrome bug?

Env:

Operating System: macOS 14.5
Node Version: v20.13.0
Nuxt Version: 3.13.1 (compatibilityVersion: 4)
CLI Version: 3.12.0
Nitro Version: 2.9.7
Package Manager: npm@10.8.2
Chrome: 128.0.6613.120

benjamincanac commented 1 month ago

Could you please tell me if using nuxt@3.13.0 fixes the issue? You can set it in your resolutions to try it out.

createwithjames commented 1 month ago

I'm experiencing the same issue for both Slideovers and Modals

Env:

Operating System: macOS 14.5
Node Version: v18.19.1
Nuxt Version: 3.13.0
CLI Version: 3.12.0
Nitro Version: 2.9.7
Package Manager: npm@10.8.2
Chrome: 128.0.6613.120

fabianbeier commented 1 month ago

@benjamincanac Changed reproduction to 3.13.0. Unfortunately the bug persists. Also tried out 3.12.4 which used to work 2-3 weeks ago but doesn't now.

Tragio commented 1 month ago

Seems to be related to Headless UI -> https://github.com/tailwindlabs/headlessui/issues/3456 since the Nuxt UI is using TransitionRoot and others under the hood.

benjamincanac commented 1 month ago

Thanks @Tragio for the investigation, seems to be related to Vue 3.5 then. We'll have to wait for a fix from Headless UI.

mtzrmzia commented 1 month ago

Is there any workaround? I just downgrade to 3.4.x and Nuxt 3.13.0 but then i got an error.. so doesn't work

NasrALdaya commented 1 month ago

I am experiencing the same issue after upgrading to Nuxt 3.13.1

hoachnt commented 1 month ago

Same guys. I thought it was my fault, but after I saw your comments guys maybe it's not my fault

Lauwisme commented 1 month ago

Can confirm that downgrading vue (in my case to 3.4.27) solved the issue with enter transitions

mtzrmzia commented 1 month ago

Can confirm that downgrading vue (in my case to 3.4.27) solved the issue with enter transitions

No working for me:

  "dependencies": {
    "@nuxt/ui": "^2.18.4",
    "nuxt": "^3.13.0",
    "vue": "3.4.38",
  },

I'm getting this error: Slideover.vue:1 Uncaught (in promise) SyntaxError: The requested module '/_nuxt/node_modules/vue/dist/vue.runtime.esm-bundler.js?v=f75796e0' does not provide an export named 'useId' (at Slideover.vue:1:209)

IJsLauw commented 1 month ago

"dependencies": { "@nuxt/ui": "^2.18.4", "nuxt": "3.11.2", "vue": "3.4.27", }, "overrides": { "vue": "3.4.27" }

This is what's working for me, fwiw.

schillerenrico commented 1 month ago

not working on the official nuxt ui site either https://ui.nuxt.com/components/slideover

benjamincanac commented 1 month ago

@schillerenrico I recently updated the docs to Nuxt 3.13.2 so this makes sense.

nuxt / ui