Explaining the title pretty much covers it all. I've looked for a solution on StackOverflow, but neither of them provided any help.
Here's an example using a classic modal component:
Vue.component('modal', {
template: `
<transition name="modal">
<div class="modal-wrapper">
<div class="modal-dialog">
<slot></slot>
</div>
</div>
</transition>
`,
})
const app = new Vue({
el: '#app',
data: {
showModal: false,
},
})/* transition */
.modal-enter-active,
.modal-leave-active {
transition: opacity .5s;
}
.modal-enter,
.modal-leave-to {
opacity: 0;
}
.modal-wrapper {
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, .25);
}
.modal-dialog {
max-width: 90%;
padding: 1em;
background: white;
}<script src="https://vuejs.org/js/vue.js"></script>
<div id="app">
<p><button @click="showModal = true">Show modal</button></p>
<modal v-if="showModal">
<h3>Hello world</h3>
<p>Amet quam alias amet incidunt voluptatum sapiente Mollitia</p>
<p><button @click="showModal = false">Close</button></p>
</modal>
</div>(There are no errors in the console as well)
However, everything is fine when using v-show. But I can't use it instead of v-if in my project.
Vue.component('modal', {
template: `
<transition name="modal">
<div class="modal-wrapper">
<div class="modal-dialog">
<slot></slot>
</div>
</div>
</transition>
`,
})
const app = new Vue({
el: '#app',
data: {
showModal: false,
},
})/* transition */
.modal-enter-active,
.modal-leave-active {
transition: opacity .5s;
}
.modal-enter,
.modal-leave-to {
opacity: 0;
}
.modal-wrapper {
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, .25);
}
.modal-dialog {
max-width: 90%;
padding: 1em;
background: white;
}<script src="https://vuejs.org/js/vue.js"></script>
<div id="app">
<p><button @click="showModal = true">Show modal</button></p>
<modal v-show="showModal">
<h3>Hello world</h3>
<p>Amet quam alias amet incidunt voluptatum sapiente Mollitia</p>
<p><button @click="showModal = false">Close</button></p>
</modal>
</div>In this case, I have to enclose <modal> with <transition> wherever the modal is used and remove the transition from the modal itself (which doesn't seem ideal).
<transition name="modal">
<modal>
...
</modal>
</transition>
Why is that and how can we make the entering animation work (with v-if, and <transition> inside the modal component?
I've observed that there is no such issue with Vue 2.5 (as opposed to Vue 2.6). Something has definitely changed since then.