Question

我在这里有一个进度栏：https://codepen.io/chuckcoury/pen/xNJzNZ

单击按钮时，进度条将从不确定切换到确定。我实质上是在嘲笑服务器，使我们获得成功。

我要实现的目标是仅在第一个动画完成一个循环后才开始播放第二个动画。看起来像这样，但是由一个按钮触发（模拟成功事件）：{{ 3}}

我正在使用的HTML。这只是简单的加载栏标记。

    <!doctype html>
    <button>click me</button>
    <div class="loading-container center">
      <span>Loading</span>
      <div class="loading">
          <div id="test" class="loading-bar processing fade-out"></div>
      </div>
    </div>

完整的CSS。我正在使用两种不同的CSS动画在处理和 complete 状态之间交替：

    .loading-container {
      width: 6em;
      font-family: arial;
      font-size: 14px;
    }

    .loading {
        background-color: lightgrey;
        height: 2px;
        margin-top: .25em;
        overflow: hidden;
        position: relative;
        width: 3.5em;
    }

    .loading-bar {
        background-color: dodgerblue;
        height: 100%;
        width: 50%;
        z-index: 100;
    }

    .loading-bar.processing {
        animation: side2side 1.5s ease-in-out infinite;
    }

    .loading-bar.complete {
        animation: fill 1.5s ease-in-out;
        animation-fill-mode: forwards;
    }

    @keyframes side2side {
        0%, 100%        { transform: translateX(-50%); }
        50%       { transform: translateX(150%); }
    }

    @keyframes fill {
        0% { width: 50% }
        100%    { width: 200% }
    }

    .center {
        margin: 2em;
    }

...以及我用来模拟返回成功的服务器事件的JavaScript：


    $(function() {
        $('button').on('click', function() {
          $('.loading-bar')
              .addClass('complete')
              .addClass('fill');
        });
    });

在JavaScript事件上切换CSS动画，但仅在最后一个关键帧之后

0 个答案: