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

Question

]

There is some kind of delay when I use ng-hide / ng-show, and that really bothers me. But when executed similarly in JS Fiddle, it works fine. Here is JS Fiddle

Any reason this is happening? And how can I fix this?

<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 Use the ngcloak directive I found the contents of the AngularJs documentation below The directive can be applied to an element, but the preferred application is to apply several ngCloak directives to small parts of the page to provide progressive rendering browsing browser.

Answer 3

You can do it css

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

Just add this class to the 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

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>