css - 将 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;
}

我在 View 中有 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>

在我的 Controller 中，我第一次显示添加按钮并隐藏另一个编辑和删除按钮。但编辑和删除按钮第一次在几分之一秒内可见。

$scope.view ={

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

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

问题

如何解决这个问题？

提前致谢

Answer 1

在花了很多时间后我得出一个结论，由于转换所有属性，它适用于显示无/ block 。

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

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

想分享这个信息....

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

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

它给了我正确的结果，没有其他功能损坏。

希望对其他人有用

谢谢大家