Vue 2 Transition not working

Question

I have no idea where my code went wrong. It should be a simple transition. When I click the button the message shows correctly, but just that the there is no fade transition happening at all.

<template>
    <div>
        <transition name="fade">
            <message v-show="showMessage" class="tr pop-up-message">
                <p slot="header">This is Header</p>
                <span slot="body">This is Body</span>
            </message>
        </transition>

        <div v-if="!showMessage" class="block" @click.prevent="showMessage = true">
            <a class="button is-primary">Primary</a>
        </div>
        <div v-else-if="showMessage" class="block" @click.prevent="showMessage = false">
            <a class="button is-primary">Primary</a>
        </div>
    </div>
</template>

<script>
    import message from './Message.vue'
    export default {
        components:{
            'message': message,
        }, 
        data(){
            return{
                showMessage: false
            }
        },
    }
</script>

score 36 · Accepted Answer · edited Oct 02 '17 at 10:12

36

Have you added these CSS as well:

.fade-enter-active, .fade-leave-active {
    transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
    opacity: 0
}

I have tried to reproduce your code here with above CSS which works.

edited Oct 02 '17 at 10:12

rmNyro

351
2
14

answered Mar 09 '17 at 04:42

Saurabh

71,488
40
181
244

Should these transition be in .vue file or should be in any other css? – Anwar Oct 26 '17 at 14:40
It will be better to use it in the same vue file unless you are re-using it the same in other files as well. – Saurabh Oct 26 '17 at 16:39
1

Try to use v-if and try to add key property to the – Riku Jun 13 '19 at 08:05

score 10 · Answer 2 · answered Oct 04 '19 at 04:51

I had two <p> tags right next to each other like below

<p v-if="!isControlling">Take control of the camera by clicking</p>
<p v-else>Press <kbd>Esc</kbd> to exit camera. <kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd> <kbd>Space</kbd> <kbd>Shift</kbd> to move. Mouse to look.</p>

and they just didn't work. It looked like Vue was reusing the same <p> tag in the markup to render both. Adding a key to each made the transition work (thanks @Mark). The fix should look something like below

<p key="asd" v-if="!isControlling">Take control of the camera by clicking</p>
<p key="asf" v-else>Press <kbd>Esc</kbd> to exit camera. <kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd> <kbd>Space</kbd> <kbd>Shift</kbd> to move. Mouse to look.</p>

Yes, this is the common mistake everyone get confused. I think this have to be added in vue transition official documentation also. — Varun Kumar Medam, Jun 19 '21 at 21:29

Vue 2 Transition not working

2 Answers2

Linked