javascript动画-使用上一个端点的按钮

我试图让一个条在下图上下滑动，基于按钮触发的特定值。理想情况下，每次新的“开始”位置都是先前输入的“结束”位置（除非有更好的方法）。这是

我下面的代码实现了我想要的大部分功能，除了我希望在每次单击按钮后使条在所需值之间平滑滑动。谢谢

#容器{
宽度：19px；
高度：186px；
位置：相对位置；
背景：清晰；
边际：0px；
}
#生动活泼{
边框：1px纯白；
宽度：32px；
高度：12px；
位置：绝对位置；
背景色：#252525；
}

移到橙色
转向绿色
换成蓝色

功能myMove（启动、停止）{
var elem=document.getElementById（“动画”）；
变量id=设置间隔（第5帧）；
函数框架（）{
如果（开始=停止）{
清除间隔（id）；
}否则{
启动++；
elem.style.top=start+'px'；
}
}
}

使用CSS3转换的惊人平滑动画

使用

数据-*

属性代替内联JS调用

简单JS代码

var moveBtn=document.queryselectoral（“[data move]”）；
var bar=document.getElementById（“动画”）；
功能移动（el）{
el.addEventListener（“单击”，函数（）{
bar.style.transform=“translateY”（+this.dataset.move+“px）”；
});
}
[]forEach.call（moveBtn，move）
#容器{
宽度：19px；
高度：186px；
位置：相对位置；
}
#生动活泼{
边框：3px实心#444；
宽度：14px；
高度：8px；
位置：绝对位置；
排名：0；
-webkit转换：0.4s；
过渡：0.4s；
}

移到橙色
转向绿色
换成蓝色

为了使杆平稳地滑动到下一个位置，而不是再次从顶部滑动，您需要知道杆当前从何处开始

这可以通过几种方式实现，要么让一个全局变量存储当前位置，要么在每次调用myMove时重新计算当前位置

您需要考虑的另一件事是，滑块可能需要向上滑动才能到达正确的位置，而不仅仅是向下滑动。这是最容易在相同的if/else语句中处理的，您已经在使用该语句来检查条是否已经处于正确的位置

使用全局变量跟踪当前位置的示例：

（作为奖励，myMove（）不再需要作为参数指定起始位置，只需指定您希望条形图结束的位置）。

#容器{
宽度：19px；
高度：186px；
位置：相对位置；
背景：清晰；
边际：0px；
}
#生动活泼{
边框：1px纯白；
宽度：32px；
高度：12px；
位置：绝对位置；
背景色：#252525；
}

移到橙色
转向绿色
换成蓝色

var start=0；
功能myMove（停止）{
var elem=document.getElementById（“动画”）；
变量id=设置间隔（第5帧）；
函数框架（）{
如果（开始=停止）{
清除间隔（id）；
}否则如果（开始>停止）{
开始--；
elem.style.top=start+'px'；
}否则{
启动++；
elem.style.top=start+'px'；
}
}
}
为什么
null
在
myMove（null，5）
中？在多次单击之后，动画开始出现不适当的行为：染色，这种方法似乎更稳定。我怎样才能在加载时设置初始位置？。。。也许