在 HTML5 中实现动画插入符号的好方法？

Question

一些背景：我正在开发一个带有 HTML5/AngularJS/Bootstrap3 表示层的应用程序。该应用程序是一个乐谱查看器和播放器。

乐谱本身只是一张图片。我已经成功编写了代码来检测页面上的音乐元素，包括公制元素。或者，简单地说，我知道每个音乐部分中每个节拍的边界框的坐标。这些边界框基本上是 DIV，然后叠加在分数页面图像上。所以现在，我可以在音乐播放时突出显示特定的小节和节拍。

但是，我想做的是让它成为一个动画插入符号。只是一条垂直线，它在已知的时间内穿过每个 DIV。

所以，归结为问题：

你有一个DIV。您想在 n 秒内通过 DIV 绘制一条从左侧开始到右侧结束的垂直线。

CSS 大师有任何指点吗？同样，环境是 AngularJS with Bootstrap 3, HTML5.

Answer 1

您可以绝对定位插入符号，然后使用 CSS Transition 属性和 "left"。确保将 "linear" 用于计时功能（请参阅文档了解其他人的描述，但对于您的用例，您肯定需要线性）。

当您需要开始运行插入符时，您可以将 class 添加到插入符 div - 并为该元素添加 css 规则 class 对于 "left" 会有不同的值，并且插入符号会平滑地移动到新位置。

例如

$('button').click(function() {
  $('#caret').toggleClass('endOfLine');
})

#wrapper {
  width: 100%;
}
#caret {
  position: absolute;
  left: 5px;
  transition: left 5s linear;
  height: 40px;
  width: 2px;
  background: #0a0a0a;
}
#caret.endOfLine {
  left: 95%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='wrapper'>
  <button>Run/Reset!</button>
  <div id='caret'>
  </div>
</div>

在 HTML5 中实现动画插入符号的好方法？

A good way to implement an animated caret in HTML5?

html

css

animation

caret

angularjs