переходный элемент не работает в SSR Nuxt. js - PullRequest
Новая
       2

переходный элемент не работает в SSR Nuxt. js

1 голос
/ 06 мая 2020

Я использую <transition> в компоненте Nuxt, как показано ниже. js

<template>
    <transition name="fade">
        <div class="modal-container h-screen overflow-y-auto" v-show="!!value">
            <close-button @click.native="closeModal()"></close-button>
            <div class="modal w-4/5 mx-auto rounded-sm bg-white p-8" ref="modal">
                <slot></slot>   
            </div>
        </div>
    </transition>
</template>
<script type="text/javascript">
import vModel from '@/helpers/v-model.mixin';
export default{
    mixins: [vModel],
    methods:{
        closeModal(){
            this.updateValue(false);
        }
    }
}
</script>

Я действительно уверен, что добавил css для <transition name="fade">

.fade-enter{
    .modal{
        opacity: 0;
        margin-top: -10vh;
    }
}
.fade-enter-active{
    .modal{
        animation: drop-fade-in .5s;
    }
}
.fade-enter-to{
    .modal{
        margin-top: 0vh;
        opacity: 1;
    }
}

.fade-leave{
    .modal{
        margin-top: 0vh;
        opacity: 1;
    }
}
.fade-leave-active{
    .modal{
        animation: drop-fade-in .5s reverse;
    }
}
.fade-leave-to{
    .modal{
        opacity: 0;
        margin-top: -10vh;
    }
}

@keyframes drop-fade-in{
    0%{
        opacity: 0;
        margin-top: -10vh;
    }
    100%{
        opacity: 1;
        margin-top: 0vh;
    }
}

.modal-container{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 99;
    background-color: rgba(0,0,0,0.618);
    width: 100%;
    padding-top: 10vh;
    .modal{
        box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2);
        margin-bottom: 10vh;
        transition: opacity .3s ease,
            margin-top .3s ease;
    }
    .close-button{
        position:fixed;
        top: 10vh;
        right: 5vw;
    }
}

, затем я использовал его в nuxt-page-component 

<modal v-model="show_modal">
    <h1>Modal Content</h1>
</modal>

, он отлично работает в SPA, который js будет работать только в браузере.

Но когда я пытаюсь использовать тот же код в рендере Nuxt на стороне сервера. js, transition не работают, я даже не могу получить компонент <transition> в vuejs -devtools. enter image description here

Как это исправить? Я уже погуглил, но ничего не помогло. Большое спасибо!

...