javascript - 使用 javascript 单击时隐藏和显示相同的元素

Question

我正在尝试隐藏一个栏，然后单击一下再次显示。重新添加类(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>

Answer 1

使用setTimeout()删除和添加类之间

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>