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 Theme，但你认为问题是插件而不是主题。

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＆＃39;宽度做：

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

现在，当它获得button.offsetWidth时，expand-left规则中还没有。当在.ladda-button元素处应用expand-left时，它会更改宽度尺寸，因为expand-left正在向其添加填充。

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

E.g。 .ladda-button的{{1}} offsetWidth。
当您点击它时，由于上面的100px css规则，offsetwidth会从100px更改为156px。
但是当expand-left被称为setProgress时，它将获得button.offsetwidth 100px，因为动画过渡尚未发生。因此，当您致电offsetWidth时，您会看到l.setProgress(0.5) .ladda-progress设置为width而不是正确的50px。

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

修改

谢谢，但如果将进度改为1则问题不会解决 jsbin.com/jonupadono/1/edit?html,output-user3477026

我明白了。问题从这个css规则开始：

.ladda-button

因此，当在.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，因为css动画尚未完成，需要300毫秒才能完成。

的解决方案
使用百分比而不是像素来计算offsetWidth＆＃39; .ladda-progress jsBin

Ladda UI没有设置正确的进度

1 个答案: