2

I have a calculations going on in the angularjs app file, basically what is happening is every time when I change the value in the HTMl form, the calculation results are getting reflected in the span block reloader_block,

What I want to do is that i want to add animation to that so that the entire span block should flash and user should notice it.

Like for example, the span block should fade-out and fade-in within milliseconds.

How can I do that?

$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>
Improve this question
1
  • what about invoking refreshDiv into a simple $watch? Commented Jul 15, 2016 at 10:40

2 Answers 2

Reset to default
1

You would simply remove and add a class with ng-class="flashback" on the block and then in your function clear the variable and set it again with the animated background css. Find a similar css solution here (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;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

You can use css transitions and $timeout in conjunction:

.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);
}
Improve this answer

5 Comments

document.getElementsByClassNames is not valid Angular code
it is valid javascript code. Why is angular required for selecting elements?
Ok, also classList.add is not valid since you are modifying the DOM and Angular doesn't know about it, it will probably work but not the Angular way of doing things
angular doesn't HAVE to know about modyfing the DOM. It only has to know when some two way data binding is being used.
Angular is also about manupulating DOM without such code. It is valid JS but not a good practice when you have Angular in your hand.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.