如何在文字/图像被点击后变暗链接？

我正在设计一个angularjs和离子框架的移动应用程序。感知响应是重要的，所以我想实现一个功能，将点击的项目变暗。所以：item opacity 1 - >用户点击图像 - >将项目不透明度设置为例如0.5 - >将用户重定向到href地址。如何在文字/图像被点击后变暗链接？

这应该如何实现角/离子框架？

这是一个有点作品的代码片段，但延迟了50毫秒。此外，preventDefault（）和window.location.href可能不是最好的使用（没有得到$位置工作）。角动画/ 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); 
    } 
});

来源

2014-04-01 Mika Vatanen

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

.dimmed{ opactiy: 0.5; }

所以：

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

，然后在你的CSS你点击这个链接，它会将dimMe设置为true，w HICH将增加变暗类，并禁用链接

新增工作fiddle

来源

2014-04-01 15:51:21 Brocco

一个指令或全局是优选的，因为功能应该可以在大多数的应用程序的链接。我试过这段代码被剪掉了，没有工作（在a或img中）。浏览器是否跳过不透明度设置？ “我们正在转向另一个页面，让我们跳过所有其他UI修改的东西” –

我更新了这个逻辑，如果这个功能被广泛使用，那么你可以进入一个指令。 – Brocco

谢谢。现在它正在工作，但暗淡的效果是可见的〜50％的情况。使用Chrome或Android webView时也是如此。 –

如何在文字/图像被点击后变暗链接？

回答

相关问题