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

Question

我正在尝试将 class 动态添加到我的 dom 中的元素，当它在 angular 中关联的模型为真时，但在 Firefox 和 Safari 中（与 Chrome 一起工作正常），与 class（旋转）关联的关键帧未显示。

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

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

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

问题是样式，你需要使用

display:block

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

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

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

Keyframe is not working with an AngularJS dynamically added class in Firefox or Safari

css

cross-browser

css-animations

angularjs