最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Delay in hiding a button using Ng-Hide in Angular JS - Stack Overflow

programmeradmin0浏览0评论

]

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;
      }
    }
Share Improve this question edited Dec 20, 2016 at 9:39 Prashanth VG asked Dec 20, 2016 at 9:37 Prashanth VGPrashanth VG 1911 silver badge14 bronze badges 6
  • 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
 |  Show 1 more ment

4 Answers 4

Reset to default 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>
发布评论

评论列表(0)

  1. 暂无评论