<template>
    <div v-observe-visibility="render">
        <transition name="slide-fade" mode="out-in">
            <div v-if="show" :style="{ transitionDelay: '0.2s' }">
                <slot></slot>
            </div>
        </transition>
    </div>
</template>

<script>
/**
 * This will make the content transition in
 */
export default {
    data() {
        return {
            isVisible: false,
            show: false
        }
    },
    methods: {
        render(e) {
            this.isVisible = e;
            if (e) this.show = true;
        }
    }
}
</script>