anglejsでdivをリフレッシュする方法

Question

anglejs appファイルで計算が行われていますが、HTMlフォームの値を変更するたびに計算結果がスパンブロックreloader_blockに反映され、

私がしたいのは、アニメーションを追加して、スパンブロック全体が点滅し、ユーザーがそれに気付くはずだということです。

スパンブロックは、たとえば、ミリ秒以内にフェードアウトおよびフェードインする必要があります。

どうすればいいですか？

$scope.refreshDiv = function() { 
    //here i want to refresh the span block `reloader_block` 
}; 

HTML：

<span class="block reloader_block"> 
    Here is how you can Walden this product: 
    You will have to share it with <B>{{sharable_with}}</b> users. Each one of you will have to give us <b>{{walden_costs}}</b>/- 
    Each of you will get to use the product for <b>{{usage}}</b> days after every <b>{{cycle}}</b> days 
    after <b>{{product_warranty}}</b> year(s) we will auction the product at <b>30%</b> of MRP. 
    {{priceful}} 
</span> 

Answer 1

あなたが一緒にCSSの遷移と$timeoutを使用することができます。

.reloader_block { 
    transition: opacity 1s ease-in; 
} 

.reloader_block-active { 
    opacity: 0.5; 
} 

$scope.refreshDiv = function() { 
    var reload_element = document.getElementsByClassName('reloader_block')[0]; 
    reloader_element.classList.add('reloader_block-active'); 
    $timeout(function() { 
     reloader_element.classList.remove('reloader_block-active'); 
    }, 500); 
} 

Answer 2

あなたは、単にNG-クラス= "フラッシュバックを持つクラスを削除し、追加します"をブロックし、関数内で変数を消去し、アニメーション化されたバックグラウンドCSSで再度設定します。ここでは同様のCSSのソリューションを探す（A "flash" of color, using pure css transitions）

$scope.refreshDiv = function() { 
    $scope.flashback = ""; 
    $scope.flashback = "demo"; 
}; 

HTML：

<span ng-class="flashback"></div> 

CSS：

@-webkit-keyframes demo { 
    0% { 
     background-color: Yellow; 
     opacity:1; 
    } 

    100% { 
     background-color: #777; 
    } 
} 

.demo { 
    -webkit-animation-name: demo; 
    -webkit-animation-duration: 900ms; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-timing-function: ease-in-out; 
}