3

Ninja Forms Multi-Part Form アドオンに付属のプログレス バーを使用しています。プログレス バーの設定は次のとおりです。

<div class="nf-progress-container">
    <div class="nf-progress" style="width: 0%;"></div>
</div>

マルチパート フォームの後続の各パートに進むと、一部の JS または jQuery がインラインstyle属性の幅を変更.nf-progress divし、各ステップが完了するとプログレス バーがいっぱいになります。

視覚化しやすいように、スタイルを適用した私の UI は次のようになります。

視覚化するのに役立つように、スタイルの進行状況バーは次のようになります

.nf-progress各ステップが完了するたびにプログレス バーが divをアニメーション化するようにしたいと思います。と同じくらい簡単になると思ったtransition: width 1s ease;のですが、うまくいきません（でも-webkit-transition）。これが私が試したものです。

.nf-progress-container .nf-progress {
    transition: width 1s ease;
    -webkit-transition: width 1s ease;
}

もう少し調査したところ、transitioncss プロパティを使用してインライン スタイルをアニメーション化できないことがわかりました。理由はわかりませんが、どうやらできないようです。

私は掘り下げ続け、純粋なCSSアニメーションキーフレームでここに近づく記事を見つけました.

@-webkit-keyframes progress-bar {
   0% { width: 0; }
}
@-moz-keyframes progress-bar {
   0% { width: 0; }
}
@keyframes progress-bar {
   0% { width: 0; }
}

.nf-progress-container .nf-progress { 
  -webkit-animation: progress-bar 1s;
  -moz-animation: progress-bar 1s;
  animation: progress-bar 1s;
}

ここでの利点は、実際にある種のアニメーションを取得できることです。ただし、このアプローチの問題width:0%は、進行状況バーのすべてのステップでアニメーションが開始されることです。要素を以前の幅から新しいインライン スタイルの幅に移行させたいと考えています。

CSSでこれを行う方法を知っている人はいますか、またはjQueryでこれを達成する方法はありますか?

4

1 に答える 1