ng-ifダイジェストサイクルがその値を更新するときに滑らかでないジャンプ/トランジションを作成する

Question

特定の要素で、要素のng-ifまたは他の変更プロパティの更新時に隠れ/遷移がスムーズでないことがわかりました。

たとえば、クリックするとAPI呼び出しが行われ、データが確認され、表示/非表示になるng-ifが更新されます。スクリーンキャストを参照してください：

http://screencast.com/t/sPLxZVetbqYD

button class="buttons purple" ng-if="!question_container.checked_answer 
    && (selections.length || question_container.answered)" 
    ng-click="checkAnswer()">Check Answer</button> 

はNGクリックのcheckAnswer()は、API呼び出しを行うng-if条件の真の部分を設定します。

$scope.checkAnswer = function() { 
    verifyAnswer().then(function (res) { 
     $scope.question_container.checked_answer = res; //will be true or false 

私は、これはAPI呼び出しの遅れから明らかであるので、私は二checked_answerを追加し、直前にボタンを非表示にするには、APIの呼び出しにtrueに設定と仮定しています：

$scope.checkAnswer = function() { 
    $scope.question_container.checked_answer = true; 
    verifyAnswer().then(function (res) { 

遅延/ちらつきがまだ発生します。ページ上の要素の表示をスムーズにするにはどうすればよいですか？

Answer 1

ngifへのトランジションを追加してみてください。角度のマニュアルに従って

：

<label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/> 
Show when checked: 
<span ng-if="checked" class="animate-if"> 
    This is removed when the checkbox is unchecked. 
</span> 

.animate-if { 
    background:white; 
    border:1px solid black; 
    padding:10px; 
} 

.animate-if.ng-enter, .animate-if.ng-leave { 
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
} 

.animate-if.ng-enter, 
.animate-if.ng-leave.ng-leave-active { 
    opacity:0; 
} 

.animate-if.ng-leave, 
.animate-if.ng-enter.ng-enter-active { 
    opacity:1; 
} 

実施例は、ここで見つける：​​

その上で、問題はその後、spinnerのいくつかのタイプを追加したり、使用して、API要求に遅れている場合更新が必要な領域をグレーアウトするためのngclassは通常最も効果的です。