Delay in hiding a button using Ng-Hide in Angular JS

Question

]

There is some sort of a delay when I am using ng-hide/ng-show and it's bothering me very much. But when executed a similar in JS Fiddle it works fine. Here is the JS Fiddle

Any reason why it's happening? And how can I fix it?

<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>

Controller:

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

Answer 1

try this css once

.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

You can do this CSS

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

Just add this class on elements you want to not animate in your application. 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

Let try ng-if instead of ng-show or 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>