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>

这样代码可以工作但进度不正确：

但是当使用这段代码时 js:

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

结果正确：

这是为什么？我需要使用第一个代码，因为在点击时我有一些功能，我根据功能位置手动设置进度。

可以修复吗？我有 metronic 许可证和 Material 主题，但你认为问题是插件而不是主题。

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"。当 else 部分中的 setProgress 计算 .ladda-progress' 宽度时：

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

现在，当它达到 button.offsetWidth 时，还没有 expand-left 规则。当在 .ladda-button 元素上应用 expand-left 时，它会改变宽度尺寸，因为 expand-left 正在向其添加 padding-left。

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

例如.ladda-button 的 offsetWidth 为 100px。
当您单击它时，由于上面的 expand-left css 规则，offsetwidth 将从 100px 变为 156px。
但是当 setProgress 被调用时 button.offsetwidth 它将得到 100px offsetWidth 因为动画转换还没有发生。因此，当您调用 l.setProgress(0.5) 时，您会看到 .ladda-progress width 设置为 50px 而不是正确的 78px.

快速修复可以是这个 (jsBin)。请注意，这是一个丑陋的硬编码解决方案。更好的解决方案可能是以下内容。
当 Ladda 实例化按钮时，它可以检查 data-style 属性并获取（例如，从一个关联数组中，其中键只是面向宽度的效果名称，值将是度量）将应用于的偏移量.ladda-button 元素。

编辑

Thanks, but if change progress to 1 the problem not is solved 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;
}

因此，当在 setProgress 中调用 button.offsetWidth 时，它会得到一个较小的 offsetWidth，因为 css 动画尚未完成，需要 300 毫秒才能完成。

解决方案
使用百分比而不是像素来计算 .ladda-progress' width jsBin

Ladda UI 没有设置正确的进度

Ladda UI not set correct progress

javascript

metronic