ruby-on-rails - 在 Ember/Rails 应用程序中开发加载器 CSS 元素。它会在 codepen/jsfiddle 中正确显示，但不会在实际应用程序中显示。

Question

我正在为我们的应用程序开发一个通用加载器，它使用内置的 ember 加载子状态。它目前使用一个 ID 加载来拉动它，然后从 Controller 拉动这个加载件(详情在这里:http://emberjs.com/guides/routing/loading-and-error-substates/)。它正确地提升了这个加载状态，并显示了我已经完成的文本/其他动画，所以我知道这不是我的 Assets 的问题，也不是加载正在使用的特定 CSS 的问题。这是动画片段:

$bg: #f0efee; $c: #c31230; $size: 60px; $ease: 1s ease-out;
body { background: $bg; }
#loading {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 0; height: 0; margin: auto;
  @include border-radius(100%);
  @include box-shadow(inset 0 0 0 $size/2 $c);
  animation: load $ease infinite;
}
@keyframes load {
  100% { width: $size; height: $size; box-shadow: none; }
}

这里它在加载模板的主应用程序 View 中被调用(作为标志文件):

#loading

这是现场直播的代码笔:http://cdpn.io/CczlK

我已经尝试以几乎所有可以想象的方式破坏它，但是我尝试过的所有其他纯 CSS3 加载器都可以正常运行，我不知道从这里去哪里。任何人有一些建议或其他方法可以帮助我进一步深入研究吗？

Answer 1

您缺少动画的供应商前缀。不幸的是，指南针不包括那些。您需要使用 Bourbon 而不是 Compass(我的建议)或添加单独的属性:

-webkit-animation
-moz-animation
-ms-animation
-o-animation
animation

还有每个@keyframes(所以@-webkit-keyframes等等)。它似乎在 CodePen 上工作，因为他们必须为您添加前缀。