[Vuejs]-How to slideup two elements at the same time using css?

by

0👍

Basic idea:

After the user clicks on the button, attach class:

.disappear {
  transform: translate(0, -100px);
  transition: opacity 2s, transform 2s;
  opacity: 0
}

And then

window.setTimeout(function() { 
// set display to none, and then remove .disappear
}, 2000)

Edit: some elaboration

Give every slide

transition: opacity 2s, transform 2s;

and position them at (page) center. All slides not shown get the .slidedBottom Class

Use the following classes:

.slidedTop {
  transform: translate(0, -100px);
  opacity: 0;
}
.slidedBottom {
  transform: translate(0, 100px);
  opacity: 0;
}
.disappear {
  opacity: 0;
}
.appear {
  opacity: 1;
}
.hidden {
  display: none; // or use the hidden attribute
}

For the element to fade out (upwards):

// add .disappear

window.setTimeout(function() { 
// remove disappear, add hidden, slidedTop
}, 2000)

Fade in:

// remove hidden, slidedBottom, add appear
window.setTimeout(function() {
// remove appear
}, 2000)

Leave a comment