Subscribe on changes!

Transition is not working on modal leave when using v-if

avatar
Sep 19th 2022

Vue version

3.2.39

Link to minimal reproduction

https://sfc.vuejs.org/#eNqtVNtu2zAM/RXOwNAWiO1sw148t9iw5/2BXxSbTtTKkiDRaYMi/z7qYrdd1+5liWGIt0PykPJj8cPa6jhj0RSt7520dNNpOVnjCH6ZQSgYnZngoqqjFFwvOo0P0WHAUcyK4LHTHfWGozRq8k1SdBRDOg1w3oT3IEhcXgUj8M8hzU4vEsBRerlT2MAolMekPcfgTvPT1mt5LBBOVglClgDa3UxkNHzvlezvrruCk1zfwGNGhGv4kI/nrogRAD+DK0wxT1sngABN7RS7PpZyZKQc1xU1G9t6TVtsikRSOQlb3XqjmcDYSpcNvisiDyEZ48yM0fDhQGR9U9d+7AOXt74ybl/zqXKzJjlhhX4qd87ce3QM3BWRuoxRs/KIrnSoB3To3sP8w/UV7kItt7KO9sUWvM85OaG9JMm8C2tRONBiQqYs8rfy3A7yCL0S3r8y/c1YSq1DW6sLpC1cI2oOWaDXMw9mreblnFjwdFKp5iqNNg/FmhTACycfviUdGdvANgsKR0pS2OVBeoY8sbfCxf129iTHU9kbTbz4DfT8RpetQsm9LiXXwjfiheVeDnRo4NN2+zFrDij3BwZ4ptqJ/m7vzKwHxlfGNeD2O3G53cR/9fVqqXltvUnn0bgJ2MEDCo8bMFb0kk5PqhgYr9YTK4n45eJygaGaz9utXXpdKlx0/5cTruZZLVFfkomrn3UKxRHL+DHKA1ybzX2HgX8ZmCAIz0JP7p6pfTNRAH2disw/EoVZvZErrVD6asX1K86/ARuAy2c=

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.