]

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

]

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

• javascript
• html
• css
• angularjs

• 1 are you using ngAnimation or something?? – Sa E Chowdary Commented Dec 20, 2016 at 9:42
• 1 can you check if any animation is applied to your page ? – Manoj Lodhi Commented Dec 20, 2016 at 9:42
• Thank you both. Yes, i was using ng-animate. As I removed ng-animate it started working fine. Now I want to disable that ng-animate for that page alone. How can I do that cause I am using ng-animate elsewhere @SaEChowdary – Prashanth VG Commented Dec 20, 2016 at 9:48
• @PrashanthVG check my answer to disable ngAnimate on only these buttons. May be it helps – Manoj Lodhi Commented Dec 20, 2016 at 9:51
• 1 @PrashanthVG oh thats great and next time before posting just try to search it in SO first :-) – Sa E Chowdary Commented Dec 20, 2016 at 9:54

4 Answers 4

try this css once

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

https://docs.angularjs/api/ng/directive/ngCloak Use ngcloak directive I found below content from AngularJs documentation The directive can be applied to the element, but the preferred usage is to apply multiple ngCloak directives to small portions of the page to permit progressive rendering of the browser view.

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>

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>