2

I am trying to get a bar to hide and then show again in one click. Do I need to put some kind of time out when re-adding the class?

var button = document.querySelector('.btn');

button.addEventListener('click', function() {

  document.querySelector('.bar').classList.remove('animateBar');
  document.querySelector('.bar').classList.add('animateBar');


});
* {
  padding: 0;
  margin: 0;
}

.wrap {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative
}

.bar {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
  background-color: black;
  transform: translateY(100%);
  transition: transform 1s;
}

.animateBar {
  transform: translateY(0);
  transition: transform 1s;
}

.btn {
  position: relative;
  display: block;
  text-align: center;
  cursor: pointer;
}
<div class="wrap">

  <div class="bar animateBar"></div>

  <div class="btn">hide/show</div>

</div>

Improve this question
3
  • 1
    What's the point? Commented Apr 17, 2018 at 13:55
  • @Mason executing both lines simultaneously just overlays both animations i guess. maybe try to use setTimeout(() => {}, 1000) and wait with the second animation Commented Apr 17, 2018 at 13:57
  • I am playing around with a slideshow of images and when an image slides out I want this bar to slide down and when the next image has slid in i would like it to pop up again. I know to achieve this i would need some kind of timeout but just wasn't sure if i could just use a transition delay via css for the added class or if it would need to be done in the actual function. Commented Apr 17, 2018 at 13:58

3 Answers 3

Reset to default
2

use setTimeout() between removing and adding the class

var button = document.querySelector('.btn');

button.addEventListener('click', function() {

  document.querySelector('.bar').classList.remove('animateBar');
  setTimeout(function(){
    document.querySelector('.bar').classList.add('animateBar');
  }, 1000);
  


});
* {
  padding: 0;
  margin: 0;
}

.wrap {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative
}

.bar {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
  background-color: black;
  transform: translateY(100%);
  transition: transform 1s;
}

.animateBar {
  transform: translateY(0);
  transition: transform 1s;
}

.btn {
  position: relative;
  display: block;
  text-align: center;
  cursor: pointer;
}
<div class="wrap">

  <div class="bar animateBar"></div>

  <div class="btn">hide/show</div>

</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

this worked great thank you very much! I will just the timeout accordingly however i need it
0

Yes you need to use setTimeout with a delay. Try the following. 

var button = document.querySelector('.btn');

button.addEventListener('click', function() {

  document.querySelector('.bar').classList.remove('animateBar');      
  setTimeout(() => {
     document.querySelector('.bar').classList.add('animateBar');      
  }, 800);

});
* {
  padding: 0;
  margin: 0;
}

.wrap {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative
}

.bar {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
  background-color: black;
  transform: translateY(100%);
  transition: transform 1s;
}

.animateBar {
  transform: translateY(0);
  transition: transform 1s;
}

.btn {
  position: relative;
  display: block;
  text-align: center;
  cursor: pointer;
}
<div class="wrap">

  <div class="bar animateBar"></div>

  <div class="btn">hide/show</div>

</div>

Improve this answer

1 Comment

thank you worked as expected
0 
var button = document.querySelector('.btn');

button.addEventListener('click', function() {

  document.querySelector('.bar').classList.remove('animateBar');
  setTimeout(() => {
      document.querySelector('.bar').classList.add('animateBar');
  }, 1000);


});

This should work

Improve this answer

1 Comment

this worked thank you very much