ng-showng-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设置一个0s的过渡时间，但可能我在css中的目标定位错了，或者用了错误的标记来实现这个功能。

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

我也试过用

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

更新 - ng-if产生了同样的过渡问题，两个都是瞬间显示。

Answer 1

添加:

.ng-leave { display:none !important;}。

在我的css中添加：.ng-leave { display:none !.important;}似乎已经成功了。