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

您是否也添加了这些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其中工程.

Answer 2

我有两个<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>