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