javascript - Ladda用户界面未设置正确的进度

我正在使用此代码创建一个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，但您认为问题出在插件而非主题上。 最佳答案 要了解第一个示例中发生的情况，您必须查看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。当您单击它时，由于上面的offsetwidth css规则，100px将从156px更改为expand-left。但是，当setProgress被称为button.offsetwidth时，它将获得100px offsetWidth，因为动画过渡尚未发生。因此，当您呼叫l.setProgress(0.5)时，将会看到.ladda-progress width设置为50px而不是正确的78px。快速修复可以是这个（jsBin）。请注意，这是一个难看的硬编码解决方案。更好的解决方案可能是以下方法。当Ladda实例化按钮时，它可以检查data-style属性并获取（例如，从关联数组中，其中键仅是面向宽度的效果名称，而值将是小数位数）将应用于元素。编辑  谢谢，但是如果将进度更改为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;}因此，当在.ladda-button内部调用button.offsetWidth时，由于css动画尚未完成，因此得到的setProgress较小，它需要300毫秒才能完成。解使用百分比而不是像素来计算offsetWidth'.ladda-progress jsBin关于javascript - Ladda用户界面未设置正确的进度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38921106/