Transition is not working on modal leave when using v-if
Vue version
3.2.39
Link to minimal reproduction
Steps to reproduce
- Create a modal component that incorporates the transition with appear attribute
- Add
visible: Boolean
data on the parent component - Toggle
visible
with button in order to show the modal - Add the v-if="visible" on the
on the parent component
What is expected?
Modal to transition when entering and when leaving
What is actually happening?
Modal transitions only when entering but not when leaving
System Info
System:
OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Memory: 629.28 MB / 15.35 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
Browsers:
Chrome: 105.0.5195.102
Firefox: 104.0.2
npmPackages:
vue: 3.2.39 => 3.2.39
Any additional comments?
This is noticed while migrating to Vue 3 from Vue 2. In Vue 2 was working as expected, but in Vue 3 looks to be broken.
Is there a workaround?
Please notice, that with v-show
works as expected. The problem is only with v-if
.