Vue 2 转换不起作用

Question

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

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

Answer 1

我有两个 <p> 标签紧挨着，如下所示

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

他们只是没有工作。看起来 Vue 在标记中重用了相同的 <p> 标签来渲染两者。为每个添加一个key 使转换工作（感谢@Mark）。修复应该如下所示

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

Answer 2

您是否也添加了这些 CSS：

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

我已尝试使用上面的 CSS 重现您的代码 here。