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'
    })
}

将CSS动画与JQuery结合起来，同时保持其平滑性

1 个答案: