How to add animation in AngularJS on model change?

Question

Angular

There is some text that changes over time.
<h1>{{ ctrl.modelName.value }}</h1>
How to add animation to it? More precisely the old text fade-out, the new text fade-in?

Answer 1

write a directive, and there is magic with DOM and css transition.