2

私は、パーセンテージ値の CSS および HTML ベースのバー表現を使用したプロジェクトに取り組んでいます。コードは次のようになります。

HTML:

<div class="chart">
  <div class="bar" style="width:43%"></div>
</div>

CSS:

.chart {
  background-color: #DADADA;
  height: 2px;
  position: relative;
}

.chart .bar {
    background-color: #3D98C6;
    height: 100%;
}

私がやりたいことは、ページの読み込み時にバーの幅を 0% で開始し、それをインライン値にアニメーション化することです。バックエンド開発者が Ruby on Rails でパーセンテージをビューに出力できるように、値をインラインにしたいと考えています。私はトランジションでこれを行うことができることを知っており、現在は次のようにしています:

CSS:

.chart .bar {
  -moz-transition: width 1.25s linear;
  -webkit-transition: width 1.25s linear;
  -ms-transition: width 1.25s linear;
  -o-transition: width 1.25s linear;
  transition: width 1.25s linear;
}

body.jquery.csstransitions:not(.loaded) .chart-container .chart .bar {
  width: 0% !important;
}

JavaScript:

$(function() {
  $('body').addClass('jquery');

  // Way down in the code

  $('body').addClass('loaded');
});

これは、ユーザーが JavaScript をサポートしていて、ブラウザーが CSS トランジションをサポートしており、"loaded" のクラスがまだ本文に追加されていない場合、すべてのバーの幅が 0% であることを示しています。.loaded が jQuery で追加されると、バーはすべてインライン値に移行します。

この方法で私が抱えている問題は、ユーザーが JavaScript を有効にして「jquery」および「csstransitions」クラスが追加される可能性はわずかですが、追加するコードに到達する前に何らかの理由で壊れてしまうことです。クラス.loaded。これにより、バーがすべて幅 0% で表示されます。私が取り組んでいるこのプロジェクトには多くの人が関わっており、JavaScript が適切な場所で壊れて、ユーザーに壊れたチャートが表示される可能性があります。代わりに、CSS キーフレーム アニメーションを使用して幅 0% からインライン幅までアニメーション化できれば、JavaScript を方程式から外して、コードがバーをアニメーション化するか、アニメーションなしで単にロードするかを知ることができます。

JavaScript に依存せずに、ページの読み込み時に幅をアニメーション化/遷移させる方法はありますか?

4

1 に答える 1

4

結局、私の質問は実際にはかなり簡単に答えられたようです。私はこれまで CSS キーフレーム アニメーションを使用したことがなく、基本的に時間に基づいて条件付きでスタイルを適用し、それらの間でアニメーション化することを認識していませんでした。これが意味することは、特定のキーフレームにスタイルを適用しないと、スタイルを適用する次のものが空のスタイルの代わりにアニメーション化されるということです。これは、私がこれを行うことができることを意味します:

HTML:

<div class="chart">
  <div class="bar" style="width:43%;"></div>
</div>

CSS:

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

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

@-ms-keyframes animate-bar {
    0%   { width: 0%; }
}

@-o-keyframes animate-bar {
    0%   { width: 0%; }
}

@-keyframes animate-bar {
    0%   { width: 0%; }
}

.chart {
  background-color: #DADADA;
  height: 2px;
  position: relative;
}

.chart .bar {
  background-color: #3D98C6;
  height: 100%;
  -moz-animation: animate-bar 1.25s 1 linear;
  -webkit-animation: animate-bar 1.25s 1 linear;
  -ms-animation: animate-bar 1.25s 1 linear;
  -o-animation: animate-bar 1.25s 1 linear;
  animation: animate-bar 1.25s 1 linear;
}

また、0% の開始アニメーションはインライン スタイルにアニメーション化されます。これは、終了スタイルがないということは、終了スタイルがそのスタイルを上書きするものと同等であることを意味するためです。

編集：

これを将来の訪問者に示すために、 JS Fiddleを作成しました。

于 2012-06-27T21:08:10.597 に答える