Vue 2 转换不起作用

我不知道我的代码哪里出了问题。这应该是一个简单的过渡。当我单击按钮时，消息显示正确，但只是根本没有发生淡入淡出过渡。

<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>

您是否也添加了这些 CSS：

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

我尝试重现你的代码here https://jsfiddle.net/953dk7y5/与上面的 CSS 一起工作。