关键帧不能在Firefox或Safari中使用AngularJS动态添加的类

Question

我想动态地将类添加到我的dom中的某个元素，但它与angular关联的模型是true，但是在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