CODEWITHSUNDEEP
cssanimationvue.jsvuejs2transition
BT101
BT101

Reputation: 3836

Full screen div sliding from up in vue2JS

I'm trying to create a 100% width and 100vh height div which would slide from out of the screen from above to down of page. At the 70% of animation I would like to make it at the bottom then at 90% move it 30px up and on 100% make it at the bottom again so it would look like it slide from up then bounce at the bottom.

I want this happen after clicking some DOM element in a grand grandchild so basically, I'll use eventBus and my "sliding div" will be in root component (app.vue) and in the child I'll emit:

showObserved() {
     eventBus.$emit('showObserved');
}

here I'm emitting my custom event and then I'm watching this event in root component and changing boolean variable:

eventBus.$on('showObserved', async() => {
    this.showObserved = true;
});
eventBus.$on('hideObserved', async() => {
    this.showObserved = false;
});

and basing on this boolean I'm displaying my sliding div using v-if directive:

<transition name="slide-up" mode="out-in">
    <observed-offer v-if="showObserved"></observed-offer>
</transition>

and here finally I use transition vue built-in component in order to make it sliding and this are my styles which should make effect that I explained in first parahraph:

/* slide from up to down */
.slide-up-leave-active {
    animation: slide-out-up .4s linear;
}

.slide-up-enter-active {
    animation: slide-in-up .4s linear forwards;
}

.slide-up-in-leave-active {
    animation: slide-out-up .4s linear;
}

.slide-up-leave {
    opacity: 1;
    transform: translateY(-100%);
}

@keyframes slide-out-up {
    0% {
        transform: translateY(0);
    }
    70% {
        transform: translateY(0);
    }
    90% {
        transform: translateY(10%);
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes slide-in-up {
    0% {
        transform: translateY(-100%);
    }
    70% {
        transform: translateY(0);
    }
    90% {
        transform: translateY(10%);
    }
    100% {
        transform: translateY(0);
    }
}

and this are style's of my sliding div:

.observed {
    width: 100%;
    height: 100vh;
    z-index: 999999999;
    overflow: hidden;
    background-color: white;
}

But this doesn't work behavior is that it instantly makes entire page white and slide only content of div. I'm pretty sure that I just made wrong CSS styles I tried various other styles and it didn't work. Also maybe it has also something to do with height: 100vh.

I add demo repository. In this demo sliding in is almost working but slide out doesn't work at all. Installation of this project is simple just clone it then cd path/to/project then npm install && npm run dev or something similiar depending on OS.

In demo it's also not hovering entire page but it leave space for button as you'll see if you clone it.

Well actually I handle to fix transitions in demo repo now the only issue is that it doesn't veil/cover entire page but it leave space for root content. Pull repo again to see that.

Upvotes: 1

Views: 978

Answers (1)

BT101
BT101

Reputation: 3836

Issue was that I was using bad transition styles and that I didn't have fixed position with top: 0 left: 0 on my panel component. After fixing that it's working correctly as you can inspect in demo repository.

Sorry for wasting time for issue that I fixed myself but it was much harder to troubleshoot in origin big project. When I created this demo repo it became so easy.

Upvotes: 1

Related Questions