在Angular JS中使用Ng-Hide隱藏按鈕的延遲

Question

]

當我使用ng-hide / ng-show時會有一些延遲，這讓我非常困擾。 但是，在JS Fiddle中執行類似操作時，效果很好。 這是JS小提琴

有什么原因嗎？ 我該如何解決？

<div ng-controller="MyCtrl">
  Hello, {{name}}!
  <button class="btn btn-warning" ng-show="isDisabled">HI</button>
  <button class="btn btn-primary" ng-hide="isDisabled">BYE</button>
  <a ng-click='relink()'> Link me to my existing account</a>
</div>

控制器：

var myApp = angular.module('myApp', []);
  function MyCtrl($scope) {
     $scope.name = 'Superhero';
     $scope.isDisabled = false;
     $scope.relink = function() {
        $scope.isDisabled = !$scope.isDisabled;
      }
    }

Answer 1

嘗試一次這個CSS

.btn.ng-animate { transition:0s none;
       -webkit-transition:0s none;
       animation: 0s none;
       -webkit-animation: 0s none; }

Answer 2

https://docs.angularjs.org/api/ng/directive/ngCloak使用ngcloak指令我從AngularJs文檔的內容中發現以下內容該指令可以應用於元素，但是首選用法是將多個ngCloak指令應用於元素該頁面允許逐步呈現瀏覽器視圖。

Answer 3

您可以執行此CSS

.no-animate {
  -webkit-transition: none !important;
   transition: none !important;
 }

只需將此類添加到您不想在應用程序中創建動畫的元素即可。 的HTML

  <div ng-controller="MyCtrl">
   Hello, {{name}}!
   <button class="btn btn-warning no-animate" ng-show="isDisabled">HI</button>
   <button class="btn btn-primary no-animate" ng-hide="isDisabled">BYE</button>
   <a ng-click='relink()'> Link me to my existing account</a>
 </div>

Answer 4

讓我們嘗試ng-if而不是ng-show或ng-hide ：

<div ng-controller="MyCtrl">
  Hello, {{name}}!
  <button class="btn btn-warning" ng-if="isDisabled">HI</button>
  <button class="btn btn-primary" ng-if="!isDisabled">BYE</button>
  <a ng-click='relink()'> Link me to my existing account</a>
</div>