angularjs - 关键帧不适用于 Firefox 或 Safari 中的 AngularJS 动态添加的类

Question

当与 angular 相关联的模型为真时，我正在尝试向我的 dom 中的元素动态添加一个类，但在 Firefox 和 Safari(与 Chrome 一起工作正常)中，与该类相关联的关键帧(旋转) 没有出现。

HTML:

<span class="{{loading ? 'loader' : ''}}"><i class="fa fa-github fa-4x"></i></span>

CSS:

.loader {
    text-align: center;
    margin: 20px;
    height: 40px;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

Answer 1

这不是根据变量添加类的好方法:

<span ng-class="{ 'loader' : loading }"><i class="fa fa-github fa-4x"></i></span>

问题是样式，你需要使用

display:block 

因为 Safari 需要阻止应用此属性。

这里有一个例子: http://codepen.io/luarmr/pen/VLPBqJ