[Vuejs]-Vue toggle div overlay from above coming down

by

0👍

Only put the toggle class .hidden on the overlay. It starts enabled and will be removed when variable showOverlay becomes true:

<div class="overlay" :class="{ hidden: !showOverlay }">
    <p>FULL SCREEN OVERLAY</p>
</div>

The .hidden class starts the overlay fully offscreen by setting its Y position to -100%:

.hidden {
    transform: translateY(-100%);
}

Once it’s removed, the overlay will slide down to its default position.

Here’s a demo:

new Vue({
  el: '#app',
  data() {
    return {
      showOverlay: false
    }
  }
});
#app {
  background: #fff;
  padding: 20px;
}
.overlay {
  transition: 1.5s all;
  background: black;
  color: white;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  text-align: center;
}
.hidden {
  transform: translateY(-100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="showOverlay = true">
    PRESS ME
  </button>
  <div class="overlay" :class="{ hidden: !showOverlay }" @click="showOverlay = false">
    <p>MY TEXT DIV with FULL SCREEN OVERLAY COMING DOWN FROM TOP</p>
  </div>
</div>

I’m assuming you didn’t want to use Vue transitions, but that’s another way to do it.

Leave a comment