Question

我在angularjs应用程序文件中进行了计算，基本上每次更改HTMl表单中的值时，计算结果都会反映在span块reloader_block中，

我想要做的是我想要添加动画，以便整个span块应该闪烁，用户应该注意到它。

例如，span块应该在几毫秒内淡出和淡入。

我该怎么做？

$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

您只需在块上删除并添加一个带有ng-class =“flashback”的类，然后在您的函数中清除变量并使用动画背景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;
}

Answer 2

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

如何刷新angularjs中的div

2 个答案: