1

.btnボタンのクラスを変更するときに、背景をアニメーション化したいと思います。たとえば、.btn-primaryから.btn-successまたは.btn-dangerにロードして渡します。

今のところ、-webkit-transition：background 1s線形を.btnクラスに追加し、jsを使用してクラスを切り替えると、変更はアニメーション化されません

（興味深い点：クロム要素検査ツールでのみcss遷移ディレクティブを追加しようとしました。）

何か案が？

更新：ボタンが無効モードの場合、トランジションは機能しますが、問題は、-webkit-transitionでサポートされていない可能性のある背景画像としてcss3グラデーションを使用していることが原因である可能性がありますか？

4

1 に答える 1

1

私はあなたがあなたのアップデートでそれを釘付けにしたと思います。CSSは背景色と位置を遷移できますが、それらをアニメーション化するために必要なグラデーション間では遷移できません。

興味がある場合は、必死の回避策のアイデアを次に示します。

  • css3キーフレームアニメーションを作成する
  • 背景の位置を「0-20px」にアニメーション化することから始めます（必ずしも-20pxである必要はありませんが、背景色のみが表示されるようにグラデーションが邪魔にならないものは何でも）
  • 次に、背景色を必要な新しい背景色にアニメーション化します
  • 背景色をアニメーション化するときのある時点で、グラデーションを必要な新しいグラデーションに切り替えます。グラデーションが表示されないため、アニメーションには表示されません。
  • 最後に、背景色のアニメーション化が終了したら、背景位置を「00」までアニメーション化します。

これをすべて十分に速く行うと、まともな効果を引き出すことができるかもしれません。やってみたら見たいです。

于 2012-09-10T18:23:53.353 に答える