뷰 2전환 작동하지 않아요.

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

그쪽도:이 전투 근무 지원 추가된 적이 있다.

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

여기서 전투 근무 지원에 일을 하고 있습니다. 당신의 코드를 복제하려고 노력해 왔다.

나는 두가지였다<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>

그리고 그들은 단지 일하지 않았다.같은 뷰 같은 재사용하어 있는 것처럼 보였다.<p>태그에 쫓아다니다 둘 다를 제공하기.를 추가하면key각각의 완화 공사(마크 @ 감사)를 만들었다."수리할 아래 같은 것 찾아야 한다.

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

언급URL:https://stackoverflow.com/questions/42686444/vue-2-transition-not-working