<template>
    <main class="content">
        <router-view v-slot="{ Component }" :key="$route.fullPath">
            <transition :name="effect" mode="out-in">
    <!--        <transition name="view" appear enter-active-class="animated bounceIn delay" leave-active-class="animated bounceOut delay" mode="out-in">-->
    <!--        <transition name="view" enter-active-class="animated-fade-in delay" leave-active-class="animated-fade-out" mode="out-in">-->

                <component :is="Component"/>

            </transition>
        </router-view>
    </main>
</template>

<script>

    export default {
        name: "TemplateContent",
        props: {
            effect: {default: 'fade'}
        }
    }
</script>

<style scoped>
    .templatemain.hide-menu .content {
        grid-template-columns: 100%;
        grid-template-areas:
                "header"
                "content"
                "footer";

        width: 100vw;
    }

    .content {
        grid-area: content;
        padding: 0;
        background: #edf0f5;
        border-left: 1px solid #e4e5e7;
        transition: all 0.4s ease 0s;
        position: relative;

        width: calc(100vw - 180px);
    }

    .content .fade-enter, .content .fade-leave-to {
        opacity: 0;
    }

    .content .fade-enter-active, .content .fade-leave-active {
        transition: opacity .3s;
    }

    @keyframes slide-in {
        from { transform: translateX(100vw) }
        to { transform: translateX(0) }
    }

    @keyframes slide-out {
        from { transform: translateX(0) }
        to { transform: translateX(100vw) }
    }

    .content .slide-enter-active {
        animation: slide-in .3s ease;
    }

    .content .slide-leave-active {
        animation: slide-out .3s ease;
    }

    .content .delay {
        animation-delay: .5s;
    }

</style>
