0

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

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

这是一个有点工作的片段，但会产生 50 毫秒的延迟。此外， preventDefault() 和 window.location.href 可能不是最好的使用（没有让 $location 工作）。角度动画/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);
  }
});
4

1 回答 1

0

您不需要指令来处理此问题：

<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类，并禁用链接

添加了一个工作小提琴

于 2014-04-01T15:51:21.627 回答