How to dim link text/image after it has been clicked?

I'm designing a mobile app with angularjs and ionic framework. Perceived responsiveness is important, so I thought to implement a feature which would dim the item clicked. So: item opacity 1 -> user clicks on image -> set item opacity to for example 0.5 -> redirect user to the href address.

How should this be implemented the angular/ionic framework -way?

Here is a snippet that somewhat works, but imposes delay of 50 milliseconds. Also, preventDefault() and window.location.href are not probably the best ones to use (didn't get $location to work). Can angular-animations/css be used for the same effect? Can it be somehow imposed for all links, so that no separate animate-click attribute would be needed.

<a animate-click href="someaddress"><img src="somesrc"></a>

And the directive

app.directive('animateClick', function() {
  return function(scope, element, attrs) {
    var clickingCallback = function(elem) {
      elem.preventDefault();
      element.css('opacity', 0.5);
      setTimeout(function() { 
        window.location.href = elem.target.href
      }, 50);
      return;
    };
    element.bind('click', clickingCallback);
  }
});