[英]Delay in hiding a button using Ng-Hide in Angular JS
There is some sort of a delay when I am using ng-hide/ng-show and it's bothering me very much. 当我使用ng-hide / ng-show时会有一些延迟,这让我非常困扰。 But when executed a similar in JS Fiddle it works fine.
但是,在JS Fiddle中执行类似操作时,效果很好。 Here is the JS Fiddle
这是JS小提琴
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;
}
}
try this css once 尝试一次这个CSS
.btn.ng-animate { transition:0s none;
-webkit-transition:0s none;
animation: 0s none;
-webkit-animation: 0s none; }
https://docs.angularjs.org/api/ng/directive/ngCloak使用ngcloak指令我从AngularJs文档的内容中发现以下内容该指令可以应用于元素,但是首选用法是将多个ngCloak指令应用于元素该页面允许逐步呈现浏览器视图。
You can do this CSS 您可以执行此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
的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
: 让我们尝试
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.