如何在点击后使链接文本/图像变暗？

Question

我正在设计一个使用angularjs和ionic框架的移动应用。感知到的响应性很重要，所以我想实现一个功能，可以使点击的项目变暗。因此: item opacity 1 -> user clicks on image ->将item opacity设置为例如0.5 ->将用户重定向到href地址。

这应该如何在angular/ionic框架-way中实现？

这是一个片段，它在一定程度上可以工作，但会造成50毫秒的延迟。此外，preventDefault()和window.location.href可能不是最好使用的(没有让$location工作)。angular-animations/css能达到同样的效果吗？它能以某种方式强加给所有链接，这样就不需要单独的动画单击属性了吗？

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

和指令

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);
  }
});

Answer 1

你不需要一个指令来处理这个问题：

<a href="#" ng-click="dimMe = true" ng-class="{dimmed: dimMe}" ng-disabled="dimMe">
    <img src="http://lorempixel.com/100/100/"></a>

然后在你的CSS中：

.dimmed{ opactiy: 0.5; }

因此，当您单击此链接时，它会将dimMe设置为true，这将添加灰显的类，并禁用该链接

添加了一个有效的fiddle