使用ng-show / ng-hide与任何css动画属性时会出现一个闪烁问题

Question

我有3个带有myBtn类的按钮，具有以下属性： -

.myBtn {
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  color: red;
  background: white;
}

我在视图中有3个按钮，如下所示

<button class="myBtn " data-ng-show="view.showAdd">Add</button>
<button class="myBtn " data-ng-show="view.showEdit">Edit</button>
<button class="myBtn " data-ng-show="view.showDelete">Delete</button>

在我的控制器中，我第一次显示添加按钮并隐藏其他编辑和删除按钮。但编辑和删除按钮第一次可见几分之一秒。

$scope.view ={

  showAdd: true,
  showEdit: false,
  showDelete: false
}

如果我正在使用ng-if那么它正在解决问题但我还有一些其他功能来选择ng-show。

题

如何解决这个问题？

提前致谢

Answer 1

花了很多时间后，我得出结论，由于过渡所有属性，它正在显示无/块。

由于ng-show和ng-hide内部使用display block / none工作，因此它显示了过渡效果。我得到了闪烁问题。

所以解决方案是删除转换属性或者使用ng-if。

想分享这个信息....

使用ng-if也问题没有得到解决。它是第一次工作。但是当你想再次隐藏它时，它会显示闪烁问题。所以我重写了属性的transition属性，如下所示： -

      transition: display 0s;
     -webkit-transition: display 0s;
     -moz-transition: display 0s;
     -ms-transition: display 0s;
     -o-transition: display 0s;

它给了我正确的结果，而不是其他功能破坏。

希望它对其他人有用

谢谢大家