Переключать анимацию CSS на событие JavaScript, но только после последнего ключевого кадра - PullRequest
Новая
       31

Переключать анимацию CSS на событие JavaScript, но только после последнего ключевого кадра

0 голосов
/ 05 июня 2019

У меня здесь есть индикатор выполнения: https://codepen.io/chuckcoury/pen/xNJzNZ

При нажатии кнопки индикатор выполнения переключается с неопределенного на определенное.Я по сути издеваюсь над сервером, дающим нам событие успеха.

То, чего я изо всех сил пытаюсь добиться, - это запуск второй анимации только тогда, когда первая анимация завершает цикл. Это будет выглядеть такно будет вызван кнопкой (событие фиктивного успеха): https://codepen.io/chuckcoury/pen/eaoZrJ

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