Javascript Ladda UI未设置正确的进度

我正在使用此代码创建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>

结果是正确的：

为什么会这样？我需要使用第一个代码，因为单击时我有一些功能，并且我根据功能位置手动设置进度

---

有可能修复吗？我有metronic许可证和材料主题，但你认为问题在于插件而不是主题。

要了解第一个示例中的情况，你必须查看Ladda按钮，第154行有

设置进度

功能：

            /**
             * 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

部分设置progress时，它会计算

.ladda progress

的宽度：

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

现在，当它获得

按钮.offsetWidth

时，

展开左

规则中还没有。 当在

.ladda按钮

元素上应用expand left时，它会更改宽度维度，因为

expand left

正在向其添加填充

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

例如，

.ladda按钮

的

偏移网络宽度

为

100px

当你点击它时，

offsetwidth

将从

100px

变为

156px

，因为上面的

向左展开

css规则。
但是当调用

setProgress

按钮时。offsetwidth将获得

100px

offsetwidth

，因为动画转换尚未发生。因此，当您调用

l.setProgress（0.5）

时，您将看到

.ladda progress

width

设置为

50px

，而不是正确的

78px

一个快速修复方法可以是这样（）。请注意，这是一个丑陋的硬编码解决方案。更好的解决方案可能是以下方法。
当Ladda实例化按钮时，它可以检查

数据样式

属性，并获取（例如，从关联数组中，其中键仅为面向宽度的效果名称，值将为度量值）将应用于

.Ladda按钮

元素的offeset

编辑

---

谢谢，但是如果将进度更改为1，问题就不会得到解决 jsbin.com/jonupadono/1/edit？html，输出–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进度

'

宽度

谢谢，但是如果将进度更改为1，问题就不会解决，谢谢！！完美现在，

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