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

问题描述

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

Having some trouble building a CSS3 loader using keyframe animations.

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

The loader consists of 4 boxes that animate going up and down. The issue I'm having is that when the animation is supposed to stop, the boxes jump to the initial position. The behaviour I'm looking for is: loader is animating infinitely until loading is done, at which point it should animate to the initial position and stop, sort of like having animation-iteration-count: infinite and changing it to animation-iteration-count: 1 to stop the animation. (which doesn't work btw).

看到这个小提琴，看看我的意思：（单击停止按钮时，框应该设置为初始位置的动画，而不是跳跃）

See this fiddle to see what I mean: https://jsfiddle.net/cazacuvlad/qjmhm4ma/ (when clicking the stop button, the boxes should animate to the initial position, instead of jumping)

基本设置为：

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

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

To start the loader, I'm adding a loader-active class that contains the animation to the 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);
      }
    }
  }
}

I我已经尝试将动画添加到 loader-wrapper 类中的spans o loader-active 并玩游戏当 loader-active animation-iteration-count 和 animation-play-state code>添加没有任何运气。

I've tried adding the animation to the spans in the loader-wrapper class w/o loader-active and playing around with animation-iteration-count and animation-play-state when loader-active is added without any luck.

谢谢！

推荐答案

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

Found a pretty simple workaround. Still not pure CSS, it involves a bit of JS, but it works well.

更新小提琴：

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

What I did was to move the loader-active class to each span (instead of the wrapper), listen to the animationiteration event on each span and stop the animation then.

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

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

  $this.off();
});

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

This basically stops the animation at the very end of an iteration cycle.

更新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动画并顺利恢复到初始状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！