1

我正在使用此代码创建一个 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，但你认为问题是插件而不是主题。

4

1 回答 1

1

要了解第一个示例中发生了什么，您必须查看 Ladda 按钮代码源，在第 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规则。当在元素上应用 expand-left 时.ladda-button，它会更改宽度尺寸，因为expand-left正在向其添加 padding-left。

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

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

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

编辑

谢谢，但是如果将进度更改为 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内部调用时，由于 css 动画尚未完成， setProgress它会变得更小，它需要 300 毫秒才能完成。解决方案 使用百分比而不是像素来计算' jsBinoffsetWidth


.ladda-progresswidth

于 2016-08-12T17:33:01.330 回答