Vue 2 Übergang nicht funktioniert

Ich habe keine Ahnung wo mein code falsch gelaufen ist. Sollte es ein einfacher übergang. Wenn ich auf die Schaltfläche klicke die Meldung richtig, aber nur darin, dass es kein fade-übergang passiert.

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

InformationsquelleAutor warmjaijai | 2017-03-09

  1. 16

    Haben Sie diese CSS:

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

    Habe ich versucht zu reproduzieren, Ihren code hier mit über CSS, die funktioniert.

    Sollte dieser übergang sein .vue-Datei oder sollte in einer anderen css?
    Es wird besser sein, verwenden Sie es in der gleichen vue-Datei, es sei denn, Sie sind re-verwenden Sie die gleiche in anderen Dateien genauso.
    warum nicht für mich? :/
    Ich bin derzeit stecken in einem ähnlichen Problem meiner Vue übergänge werden nicht ausgelöst, jedoch, meine Daten zu sein scheint reaktiv. Es wäre toll, wenn könnten Sie haben einen Blick auf Sie und teilen Ihre Gedanken, wie und wo mache ich falsch stackoverflow.com/questions/51022673/...

    InformationsquelleAutor Saurabh

Schreibe einen Kommentar