This question already has answers here:
How to create javascript delay function [duplicate]
(3个答案)
What is the JavaScript version of sleep()?
(74个答案)
去年关门了。
我正试图让一个酒吧隐藏,然后再显示一次点击。在重新添加课程时,我需要抽出一些时间吗?
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>

最佳答案

在删除和添加类之间使用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>

关于javascript - 使用javascript单击时隐藏和显示相同的元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49880024/

10-12 12:47
查看更多