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在视图中输出一个百分比。我知道我可以通过过渡来做到这一点，而我目前正在这样做：

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％。一旦.adloaded与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来向未来的访问者展示这一点。

CSS关键帧：动画/转换为页面加载时的内联值

1 个答案: