web-dev-qa-db-ja.com

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>
vue.jstransitionvuejs2
5
warmjaijai

これらの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で動作します。

18
Saurabh

以下のように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>
0
Coburn