Question

我正在设计一个带有angularjs和离子框架的移动应用程序。感知的响应性很重要，所以我想实现一个可以使点击的项目变暗的功能。所以：项目不透明度1 - ＆gt;用户点击图片 - ＆gt;将项目不透明度设置为例如0.5 - ＆gt;将用户重定向到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);
  }
});

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

如何点击文本/图像后点亮链接？

1 个答案: