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

【问题标题】：Keyframe is not working with an AngularJS dynamically added class in Firefox or Safari关键帧不适用于 Firefox 或 Safari 中的 AngularJS 动态添加的类
【发布时间】：2015-08-14 02:59:48
【问题描述】：

我正在尝试将一个类动态添加到我的 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);
    }
}

【问题讨论】：

标签： angularjs css cross-browser css-animations

【解决方案1】：

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

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

问题是样式，你需要使用

display:block

因为 Safari 需要一个块来应用此属性。

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

【讨论】：

第一个是建议，第二个是真正的问题。