极客观点
项目管理
HarmonyOS
js用setInterval（）做缓冲运动，第一个缓冲能实现效果，第二个为什么还没到达设定条件就已经停止计时了？
做一个侧边栏的缓冲效果，从左边进入和离开，但是离开的时候感觉没有在及时，LeftBar.style.left直接跳到-300px.
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
<!DOCTYPE html>
<html lang="en" style="overflow-x: hidden">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<style>
html,body{margin: 0;padding: 0;overflow-x: hidden}
.nav-container{width: 100%;height: 90px;background-color: #0abfbf;position: relative}
.nav-container #tab-bar{width: 60px;height: 60px;border: 1px #2b2c31 solid;text-align: center;position: absolute;display:flex;left: 10px;margin-top: 10px}
.nav-container #tab-bar span{width: 80%;height: 4px; background-color: #2b2c31;margin-top: 16px;
display:block;position: absolute;margin-left: 10%;}
.nav-container #tab-bar .tab-bar-1{top: 0} .nav-container #tab-bar .tab-bar-2{top: 9px} .nav-container #tab-bar .tab-bar-3{top: 18px}
.left-bar{width: 300px;border: 1px solid #0c6492;display: block;top: 0;left: -300px;right: auto;position: fixed;overflow-y:auto}
.bar-close{width: 60px;height: 60px;position: relative;right: -220px}
.bar-close .bar-left, .bar-close .bar-right{position: absolute;width: 80%;margin-left: 10%;height: 3px;background: black}
.bar-close .bar-left{transform: rotate(45deg);top: 5px} .bar-close .bar-right{transform: rotate(315deg);top: 5px}
body{left: 0px;display: block;overflow-y: auto;height: 3000px}
</style>
<body>
<nav class="nav-container">
<div id="tab-bar">
<span class="tab-bar-1"></span>
<span class="tab-bar-2"></span>
<span class="tab-bar-3"></span>
</div>
</nav>
<div class="left-bar">
<ul>
<li>首页</li>
<li>Dating Site</li>
<li>Dating Tips</li>
<li>Blogs</li>
<li>Forum</li>
<li>Sign Up</li>
</ul>
<div class="bar-close">
<span class="bar-left"></span>
<span class="bar-right"></span>
</div>
</div>
</body>
<script>
var LeftBar =document.getElementsByClassName('left-bar')[0]
var BoDy = document.body
var TabBar = document.getElementById('tab-bar')
var BarClose = document.getElementsByClassName('bar-close')[0]
TabBar.onclick = function () {
var timer = setInterval(function () {
console.log(LeftBar.offsetLeft)
if(LeftBar.style.left>=0 +"px"){
clearInterval(timer)
LeftBar.style.left = 0 + "px"
}
else {
LeftBar.style.left = (2+LeftBar.offsetLeft)/2 + "px"
BoDy.style.marginLeft = (600+LeftBar.offsetLeft)/2 +"px"
}
},100)
}
BarClose.onclick = function () {
var timer = setInterval(function () {
//console.log(LeftBar.offsetLeft)
if(LeftBar.style.left<=-300 + "px"){
clearInterval(timer)
LeftBar.style.left = -300 + "px"
}
else {
LeftBar.style.left = (-4+LeftBar.offsetLeft)/2 + "px"
BoDy.style.marginLeft =(2+LeftBar.offsetLeft)/2 +"px"
console.log(LeftBar.offsetLeft)
}
},100)
}
</script>
</html>
html5
两个函数过程相反，应该做逆运算，同时，应该注意边界值。