如何在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

回答

相关问题