ng-show/ng-hide 和 ng-switch 元素同时显示

Question

在 Angular Formly (angularjs) 表单中 - 我有两个跨度要在模型属性条件下切换。当搜索文本消失以显示微调器时，它随后会在微调器消失之前暂时显示两者。

我最初尝试了 ng-hide 和 ng-show：

<span ng-hide="model.validatingRegistration">Search</span>
<i class="fa fa-spinner fa-spin" ng-show="model.validatingRegistration"></i>

我尝试更改标记以使用 ng-switch，但即便如此，当它转换回原始状态时也会同时显示两者。

<span ng-switch="model.validatingRegistration">
    <span class="animate-switch" ng-switch-when="false">Search</span> 
    <i class="animate-switch fa fa-spinner fa-spin" ng-switch-when="true"></i>
</span>

我尝试使用 css 将过渡时间设置为 0 秒，但也许我在 css 中将其定位错误，或者使用了错误的标记来使其工作。

.animate-switch.ng-animate {
    transition-duration: 0s;
}

我也试过用

定位

[ng-switch-when] {
transition-duration: 0s;
}

更新 - ng-if 正在产生相同的过渡问题，两者都会暂时显示。

Answer 1

添加：

.ng-离开{ display:none！重要； }

我的 css 似乎已经成功了。

ng-show/ng-hide 和 ng-switch 元素同时显示

ng-show/ng-hide and ng-switch elements showing at the same time

angularjs

angular-formly