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 过渡，并且“已加载”类尚未添加到正文中，但所有条形的宽度均为 0%。使用 jQuery 添加 .loaded 后，条形图都将转换为内联值。

我对这种方法的问题是，用户启用 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 回答