使用javascript隐藏并显示相同的元素

Question

我试图让一个酒吧隐藏，然后一次点击再次显示。重新添加课程时，我需要花些时间吗？

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>

Answer 2

是的，您需要SELECT *, (ROW_NUMBER() OVER (ORDER BY person_id) -1 )/3 AS RowGrpNo, (ROW_NUMBER() OVER (ORDER BY person_id) -1 )%3 AS ColGrpNo, (ROW_NUMBER() OVER(ORDER BY person_id)-1)/9 AS PageGrpNo FROM ( SELECT DISTINCT People.person_id, People.ActivePassive, PeoplePicture.person_id, PeoplePicture.picture_id, PeoplePicture.Picture FROM People Right Join PeoplePicture On People.person_id = PeoplePicture.person_id WHERE People.ActivePassive = 'Active' )t​ 使用setTimeout。请尝试以下方法。

＆＃13;

＆＃13;

delay

＆＃13;

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

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

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

});

＆＃13;

* {
  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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

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

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


});

这应该有效