jquery - 将 CSS 动画与 JQuery 结合，同时保持其流畅性

Question

我正在尝试使用 CSS3 和 jQuery 构建传统的老虎机，但我遇到了一些问题。我从一个无限运行的 CSS3 动画开始，直到有人触发一个事件(一个按钮或类似的)。在我们继续之前，这是 CSS:

@keyframes animation-one {
  100% {
      margin-top: -960px;
  }
}

.slots-one {
  margin-top: -5px;
  border-left: 7.5px solid #38465a;
  animation: animation-one 2s linear infinite;
}

它意味着无限期地播放直到该事件被触发，然后我想平稳地过渡到一个动态的选择数字。我看不出如何在 CSS 中做到这一点，所以我决定混合一些 jQuery，这是我的结果:

.slots-one {
  margin-top: -5px;
  border-left: 7.5px solid #38465a;
}
.anim-one {
  animation: animation-one 2s linear infinite;
}

/*in order for the animation to be smooth, i needed to maintain the same speed.
 i know the height of the div is 1150px with a -5 margin-top so i divided the
 seconds of the current animation (2) by the total height then 
 multiplied it with the new dynamic height i wanted to enforce. */

var seconds = (2 / 1150) * 750; //750 being a random number between 0 and 1150

var margin = -5-750;

$('.board.slots-one').on('animationiteration', function () {
  $(this).removeClass('anim-one')
         .animate({
           "margin-top": margin+"px"
         }, seconds.toString()+"s", "linear") //i figured that an easing wouldn't look too good.
})

正如我所料，动画断断续续，没有按照我想要的方式混合。我在底部留下了一些对动画的引用。

---

引用资料:
CSS3 Animation
CSS3 Animation + jQuery Animation

---

所以我的问题是 1) 如果这可能的话，如果可以的话我该如何实现呢？ 2)如果不是，我有什么选择？
谢谢。

Answer 1

您可以使用 jquery 设置 margin-top 和 CSS transition 来控制时间。

像这样:

$('.board.slots-one').on('animationiteration', function () {
    $(this)
    .removeClass('anim-one')
    .css({
        'margin-top': margin,
        'transition': 'all ' + seconds.toString() + 's linear'
    })
}