过渡延迟不适用于 ng-class答案

【问题标题】：transition-delay doesn't work with ng-class过渡延迟不适用于 ng-class
【发布时间】：2017-11-07 09:46:21
【问题描述】：

我的按钮上有一个很棒的字体图标，它在fa-search 和fa-spinner 图标和ng-class 之间切换（当用户在相应的输入中键入内容时，它会尝试自动完成，运行 AJAX 请求并显示微调器):

<button type="submit" class="btn btn-primary">
  <i id="metasearch-icon" style="width: 15px;" ng-class="['fa', {'fa-spinner fa-pulse': loadingLocations, 'fa-search': !loadingLocations}]"></i>
  <span class="hidden-xs-inline">Search</span>
</button>

但是，在这个实现中，它闪烁得太快了，我想显示微调器至少 0.25 秒。因此，我想介绍一个transition-delay，但它不起作用：

#metasearch-icon.fa-spinner-add,
#metasearch-icon.fa-spinner-remove {
  transition-delay: 0.25s !important;
  transition: 1s linear all !important;
  background: red !important;
};

我做错了什么？

【问题讨论】：

标签： angularjs css-transitions ng-animate

【解决方案1】：

在声明转换后放置属性transition-delay。

#metasearch-icon.fa-spinner-add,
#metasearch-icon.fa-spinner-remove {
    transition: 1s linear all !important;
    transition-delay: 0.25s !important;
    background: red !important;
};

【讨论】：