Skip to content

Transition leave animation does not work with styled components inside <transition> in Vue 3 #52

@18945168

Description

@18945168

Describe the bug

When using vue-styled-components with Vue 3's <transition> component, the leave (exit) animation does not trigger or apply as expected. The enter transition works fine, but the leave transition is either skipped or immediately removed without animation.

Reproduce link

https://codesandbox.io/p/sandbox/unruffled-wood-s9d4n6?file=%2Fsrc%2FApp.vue%3A8%2C33

To reproduce

  1. Clone the reproduction repo or open the CodeSandbox link: [demo link here]
  2. Click the toggle button to show/hide the component.
  3. Observe the enter animation works, but the leave animation doesn't trigger.

Expected behavior

No response

Actual behavior

No response

Package version

No response

Framework version

No response

Node version

No response

Browsers version

No response

OS version

No response

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions