<template>
    <div id="app">
        <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
            <keep-alive :include="['search','getMore']">
                <router-view class="router-view"></router-view>
            </keep-alive>

        </transition>
        <progress-dialog v-if="isLoading"></progress-dialog>
    </div>
</template>

<script>
import ProgressDialog from "./components/progressDialog";
import { mapState } from "vuex";
export default {
    name: 'App',
    computed: {
        ...mapState(["direction", "isLoading", "userInfo"])
    },
    watch: {
        $route() {
            if (this.$route.meta.title) {
                document.title = this.$route.meta.title
            }
            else {
                document.title = '享居屋'
            }

        }
    },
    components: {
        ProgressDialog
    },
}
</script>
<style lang="less" scoped>
#app {
    width: 100%;
    height: 100%;
}
.router-view {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    animation-duration: 0.3s;
    animation-fill-mode: both;
    backface-visibility: hidden;
    overflow: auto;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}
.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
    will-change: transform;
    height: 100%;
    position: absolute;
    left: 0;
}

.vux-pop-out-enter-active {
    animation-name: popInLeft;
}
.vux-pop-out-leave-active {
    animation-name: popOutRight;
}

.vux-pop-in-enter-active {
    perspective: 1000;
    animation-name: popInRight;
}

.vux-pop-in-leave-active {
    animation-name: popOutLeft;
}

@keyframes popInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes popOutLeft {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes popInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes popOutRight {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}
</style>

