Question

您好我有以下代码：

.container2 {
  width: 300px;
  height: 50px;
  color: white;
  background-color: grey;
}
.myClass1 {
  color: red;
}
.myClass2 {
  color: blue;
}

<!doctype html>
<html ng-app="myApp" ng-controller="myController">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js">
  </script>

  <script>
    angular.module("myApp", []).controller("myController", function($scope) {

    });
  </script>

</head>

<body>
  <div class="container1">
    <input ng-if="!isOpen" type="text" placeholder="Text...">
    <span ng-if="!isOpen">Text1</span>
    <span ng-if="!isOpen">Text2</span>
    <span ng-if="isOpen">Text, when container 2 is open</span>
    <button class="myClass1" ng-click="isOpen = !isOpen" ng-class="{myClass2: isOpen}">Click here...</button>

  </div>

  <div class="container2" ng-show="isOpen">Container 2 is open now...</div>

</body>

</html>

我在我的代码片段中构建了一个小例子，它显示了与我的解决方案相同的逻辑。这里的代码片段工作得很好（代码实际上是一样的），但在我的真实解决方案中，当我点击按钮时，它会隐藏液体“文本1”和“文本2”，显示“文本何时续2”是打开“，但输入等待一点，然后它也被隐藏。当我再次关闭它时，所有元素都显示并隐藏液体......通过打开，输入闪烁然后隐藏......我试着用下面的图像向你展示：

这两个图标是我的跨度“文本1”和“文本2”
三角形是我的按钮

第1步：默认它关闭，三个元素在那里，另一个不是：

步骤2：我点击按钮，它应该隐藏3个元素并显示一个文本，但是大概0.5秒输入保持在那里，闪烁而不是隐藏 - 0.5秒它看起来像这样：

第3步：它闪烁0.5秒之后隐藏起来，而不是像这样正确：

我希望这很清楚。有人有想法吗？谢谢和欢呼。

重要编辑：它随每个表单元素闪烁，例如输入，选择，复选框等。当我在输入周围放置div并将ng-if表达式赋予div时，它可以正常工作细..

Answer 1

尝试使用ng-show，尽管ng-if如果可能有效 - 如果删除dom元素但ng-show实际上不删除dom元素它只是隐藏圆顶元素

闪烁可能是由于删除了dom元素的原因

Answer 2

这对我有用

.ng-hide.ng-hide-animate {
display: none !important;
}

https://github.com/angular/angular.js/issues/14015

在ng-if

2 个答案: