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);
}
});
You don't need a directive to handle this:
<a href="#" ng-click="dimMe = true" ng-class="{dimmed: dimMe}" ng-disabled="dimMe">
<img src="http://lorempixel.com/100/100/"></a>
and then in your CSS:
.dimmed{ opactiy: 0.5; }
So when you click this link, it will set dimMe to true, which will add the class dimmed, and disable the link
Added a working fiddle