Question

使用关键帧动画构建CSS3加载器时遇到一些麻烦。

装载机由4个盒子组成，可以上下移动。我遇到的问题是，当动画停止时，框会跳到初始位置。我正在寻找的行为是：加载器无限制地动画直到加载完成，此时它应该设置为初始位置的动画并停止，有点像animation-iteration-count: infinite并将其更改为animation-iteration-count: 1停止动画。（这不起作用）。

看到这个小提琴，看看我的意思：https://jsfiddle.net/cazacuvlad/qjmhm4ma/（点击停止按钮时，框应该设置为初始位置的动画，而不是跳跃）

基本设置是：

<div class="loader-wrapper"><span></span><span></span><span></span><span></span></div>

要启动加载程序，我要将包含动画的loader-active类添加到loader-wrapper。

LESS：

.loader-wrapper {
  &.loader-active {
    span {
      .animation-name(loader);
      .animation-duration(1200ms);
      .animation-timing-function(ease-in-out);
      .animation-play-state(running);
      .animation-iteration-count(infinite);

      &:nth-child(1) {
      }
      &:nth-child(2) {
        .animation-delay(300ms);
      }
      &:nth-child(3) {
        .animation-delay(600ms);
      }
      &:nth-child(4) {
        .animation-delay(900ms);
      }
    }
  }
}

我已经尝试将动画添加到loader-wrapper课程中的loader-active课程范围内，并在animation-iteration-count时使用animation-play-state和loader-active添加没有任何运气。

谢谢！

Answer 1

找到一个非常简单的解决方法。仍然不是纯CSS，它涉及一些JS，但它运作良好。

更新了小提琴：https://jsfiddle.net/cazacuvlad/qjmhm4ma/2/

我所做的是将loader-active类移动到每个跨度（而不是包装器），在每个跨度上听取animationiteration事件然后停止动画。

$('.loader-wrapper span').on('animationiteration webkitAnimationIteration', function () {
  var $this = $(this);

  $this.removeClass('loader-active');

  $this.off();
});

这基本上会在迭代周期的最后停止动画。

更新了LESS

.loader-wrapper {
  span {
    &.loader-active {
      .animation-name(loader);
      .animation-duration(1200ms);
      .animation-timing-function(ease-in-out);
      .animation-play-state(running);
      .animation-iteration-count(infinite);

      &:nth-child(1) {
      }
      &:nth-child(2) {
        .animation-delay(300ms);
      }
      &:nth-child(3) {
        .animation-delay(600ms);
      }
      &:nth-child(4) {
        .animation-delay(900ms);
      }
    }
  }
}

停止无限的CSS3动画并顺利恢复到初始状态

1 个答案: