1

このコードを使用してラダボタンを作成しています:

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

結果は正しいです：ここに画像の説明を入力

なぜこれ？クリックするといくつかの機能があり、機能の位置に基づいて進行状況を手動で設定するため、最初のコードを使用する必要があります。

修正することは可能ですか？私はメトロニック ライセンスとマテリアル テーマを持っていますが、問題はテーマではなくプラグインだと思います。

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

            }

あなたの例のラダボタンが設定されていdata-style="expand-left"ます。セクションでsetProgress を実行すると、幅が次のelseように計算されます。.ladda-progress

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

さて、そこに着いたとき、まだルールbutton.offsetWidthの中にはありexpand-leftません。要素にexpand-left を適用すると、 padding-left が追加さ.ladda-buttonれるため、幅の寸法が変更されます。expand-left

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

たとえば.ladda-button、offsetWidthの があり100pxます。
クリックすると、上記のcss ルールにより からにoffsetwidth変わります。 ただし、アニメーションの遷移がまだ行われていないため、が呼び出されると が取得されます。したがって、呼び出すと、正しい の代わりにsettedが表示されます。100px156pxexpand-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内部setProgressで が呼び出されるとoffsetWidth、css アニメーションがまだ終了していないため、終了までに 300 ミリ秒かかります。

ソリューション
ピクセルの代わりにパーセンテージを使用して.ladda-progress' width jsBinを計算する

于 2016-08-12T17:33:01.330 に答える