如何在angularjs中刷新div

我在angularjs應用程序文件中進行了計算，基本上每當我更改HTMl表單中的值時，發生的情況都是如此，計算結果反映在跨度塊reloader_block中，如何在angularjs中刷新div

我想要做的是我想添加動畫，以便整個跨度塊應該閃爍，用戶應該注意到它。

像例如，跨度塊應該在幾毫秒內淡出和淡入。

我該怎麼做？

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

來源

2016-07-15 Mithun Raikar

怎麼樣調用refreshDiv成一個簡單的$看？ – chf

您可以使用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); 
}

來源

2016-07-15 10:38:13

document.getElementsByClassNames無效代碼 – johan

它是有效的javascript代碼。爲什麼選擇元素需要角度？ –

好的，也是classList.add是無效的，因爲你修改的DOM和Angular不知道它，它可能會工作，但不是角度的做事方式 – johan

只需將刪除和添加一類具有納克級=「倒敘「在塊上，然後在你的函數中清除變量，並用動畫背景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; 
}

來源

2016-07-15 10:44:45 johan

如何在angularjs中刷新div

回答

相關問題