单击后如何使链接文本/图像变暗？答案

【问题标题】：How to dim link text/image after it has been clicked?单击后如何使链接文本/图像变暗？
【发布时间】：2014-05-12 11:49:06
【问题描述】：

我正在设计一个带有 angularjs 和 ionic 框架的移动应用程序。感知响应能力很重要，所以我想实现一个功能，使点击的项目变暗。所以：项目不透明度 1 -> 用户点击图像 -> 将项目不透明度设置为例如 0.5 -> 将用户重定向到 href 地址。

这应该如何以角度/离子框架方式实现？

这是一个有点工作的 sn-p，但会产生 50 毫秒的延迟。此外， preventDefault() 和 window.location.href 可能不是最好的使用（没有让 $location 工作）。角度动画/css 可以用于相同的效果吗？是否可以以某种方式对所有链接强加，这样就不需要单独的 animate-click 属性。

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

【问题讨论】：

标签： angularjs ionic-framework

【解决方案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，这样会添加dimmed类，并禁用链接

添加了一个有效的fiddle

【讨论】：

首选指令或全局，因为该功能应该在应用程序的大多数链接中。我试过剪断代码，但没有用（在 a 或 img 中）。浏览器是否跳过不透明度设置？ “无论如何，我们正在移动到另一个页面，让我们跳过所有其他 ui 修改内容”
我更新了这个逻辑，如果这个功能被广泛使用，你可以把它移到一个指令中。
谢谢。现在它可以工作了，但大约 50% 的情况下可以看到暗淡的效果。使用 Chrome 或 Android webView 时也是如此。
我刚刚用指令实现更新了 fiddle...如果 opacity 不起作用，请查看其他浏览器细节，例如 - filter: alpha(opacity=50);