遅延が

Question

]

私はNG-非表示/ NG-ショーを使用していますが、それは非常に私を悩ま遅延のいくつかの並べ替えがあります。しかし、JS Fiddleで同様のことを実行するとうまく動作します。ここには、JS Fiddle

何が起こっているのですか？それをどうやって修正することができますか？

は

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

コントローラー：

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

Answer 1

は一度

.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

代わりng-showまたはng-hideのng-ifを試してみましょう：

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

Answer 4

あなたはこの CSS

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

ちょうど要素にこのクラスを追加行うことができ、このCSSを試してみてくださいあなたはしたくないアプリケーションでアニメーション化します。 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>