Ladda UI не установлен правильный ход

Question

Я использую этот код для создания кнопки Ladda:

CSS: 
    <link href="./assets/global/plugins/ladda/ladda-themeless.min.css" rel="stylesheet" type="text/css"> 

CODE: 


<button type="button" id="test" class="btn green mt-ladda-btn ladda-button" data-style="expand-left"> <span class="ladda-label"> <i class="fa fa-key"></i> Nuova Password</span> </button> 

JS: 

    <script src="./assets/global/plugins/ladda/spin.min.js" type="text/javascript"></script> 
    <script src="./assets/global/plugins/ladda/ladda.min.js" type="text/javascript"></script> 
    <script> 
     Ladda.bind('input[type=button]'); 
     $(function() { 
     $('#test').click(function(e){ 

      var l = Ladda.create(document.querySelector('#test')); 

      // Start loading 
      l.start(); 

      // Will display a progress bar for 50% of the button width 
      l.setProgress(0.5); 
     }); 
     }); 
</script> 

Таким образом, код работы, но прогресс не является правильным:

, но при использовании этого кода ЯШ:

Ladda.bind('#test', { 
    callback: function(instance) { 
     var progress = 0; 
     var interval = setInterval(function() { 
     progress = Math.min(progress + Math.random() * 0.1, 1); 
     instance.setProgress(0.5); 

     if(progress === 1) { 
      instance.stop(); 
      clearInterval(interval); 
     } 
     }, 200); 
    } 
}); 

результат является правильным:

Почему это? Мне нужно использовать первый код, потому что на клике у меня есть какая-то функция, и я устанавливаю прогресс вручную на основе позиции функции.

Можно исправить? У меня есть метроническая лицензия и Тема материала, но, думаю, проблема - это плагин, а не тема.

Answer 1

Чтобы понять, что происходит в первом примере, вы должны смотреть на кнопку Ladda code source и в строке 154 есть функция setProgress:

  /** 
      * Sets the width of the visual progress bar inside of 
      * this Ladda button 
      * 
      * @param {Number} progress in the range of 0-1 
      */ 
      setProgress: function(progress) { 

       // Cap it 
       progress = Math.max(Math.min(progress, 1), 0); 

       var progressElement = button.querySelector('.ladda-progress'); 

       // Remove the progress bar if we're at 0 progress 
       if(progress === 0 && progressElement && progressElement.parentNode) { 
        progressElement.parentNode.removeChild(progressElement); 
       } 
       else { 
        if(!progressElement) { 
         progressElement = document.createElement('div'); 
         progressElement.className = 'ladda-progress'; 
         button.appendChild(progressElement); 
        } 

        progressElement.style.width = ((progress || 0) * button.offsetWidth) + 'px'; 
       } 

      } 

Кнопка Ladda в вас, например, имеет data-style="expand-left" выставиться. Когда setProgress в разделе else это вычислить .ladda-progress 'ширина делания:

progressElement.style.width = ((progress || 0) * button.offsetWidth) + 'px'; 

Теперь, когда он получает button.offsetWidth есть не внутри expand-left правил еще. Если элемент расширения-left применяется к элементу .ladda-button, он меняет размер ширины, так как expand-left добавляет отступы слева.

.ladda-button[data-style="expand-left"][data-loading] { 
    padding-left: 56px; 
} 

E.g. .ladda-button имеет offsetWidth от 100px.
При нажатии на него offsetwidth изменится с 100px на 156px из-за expand-left css правило выше.
Но когда setProgress называется button.offsetwidth, он получит 100pxoffsetWidth, потому что переходы анимации еще не произошли. Поэтому, когда вы звоните l.setProgress(0.5), вы увидите .ladda-progresswidth, установленный на 50px вместо правильного 78px.

Быстрое решение может быть таким (jsBin). Обратите внимание, что это уродливое жестко закодированное решение. Лучшим решением могло бы быть следующее.
Когда Ladda создает экземпляр кнопки, он может проверить атрибут data-style и получить (например, из ассоциативного массива, где ключи - это только имя, ориентированное на ширину, и значение будет мерой), которое будет применено к .ladda-button элемент.

EDIT

Спасибо, но если прогресс изменение 1 проблема не решена jsbin.com/jonupadono/1/edit?html, output - user3477026

Я вижу. Начало проблемы из этого правила CSS:

.ladda-button, .ladda-button .ladda-spinner, .ladda-button .ladda-label { 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s !important; 
} 

Так что, когда button.offsetWidth называется внутри setProgress он получает меньшую offsetWidth, потому что CSS анимация еще не закончена, она занимает 300 мс, чтобы закончить.

Решение
Используя процент вместо пикселей, чтобы вычислить .ladda-progress 'widthjsBin