jquery - CSS 关键帧 : animating/transitioning to an inline value on page load

Question

我正在开发一个元素，该元素使用基于 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 只在 View 中输出一个百分比。我知道我可以通过转换来做到这一点，我目前正在这样做:

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%。一旦 .loaded 被添加到 jQuery 中，条形图就会全部转换为内联值。

我在使用此方法时遇到的问题是，用户启用 JavaScript 并添加“jquery”和“csstransitions”类的可能性很小，但在到达添加类 .loaded 的代码。这将导致条形图全部显示为 0% 宽度。我从事的这个元素有很多人参与其中，JavaScript 有可能在正确的地方中断，导致我们的用户看到损坏的图表。如果我可以改为使用 CSS 关键帧动画从 0% 宽度到内联宽度进行动画处理，那么我就可以将 JavaScript 排除在等式之外，并且知道代码可以为条形图设置动画，或者只是在没有动画的情况下加载它们。

有没有什么方法可以在不依赖 JavaScript 的情况下在页面加载时对宽度进行动画处理/过渡？

Answer 1

看来我的问题实际上很容易回答。我以前从未使用过 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向 future 的访问者展示这一点。