Question

我需要为网站上的每次点击设置动画。因此，我为此创建了一个说明。但是，并非所有事件都能正常工作，例如，如果ui-sref或ng-click事件更改状态或打开模式窗口，动画就无法及时显示。

我正在尝试捕获点击事件并在以后运行。我知道如何停止它，但是稍后如何运行它，除了element.triggerHandler('click')外，我不知道，但是它再次调用了我要停止的click事件。

在ngLick上可以是一个函数或条件。如果您正在考虑，我正在尝试获取$state.go。

.directive('clickEffect', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {

          var md = new MobileDetect(window.navigator.userAgent);

          if (md.mobile()) {

            element[0].addEventListener('click', function (evt) {
              evt.preventDefault();
              evt.stopPropagation();
            }, true);

            var staticClass = element.attr('ce-static-class') || 'cbutton cbutton--effect-jelena';
            var animationClass = element.attr('ce-animation-class') || 'cbutton--click';
            var animationName = element.attr('ce-animation-name') || 'anim-effect-jelena';

            var onAnimationEnd = function(event) {
              if (event.animationName === animationName) {
                element.removeClass(animationClass);
                // element.triggerHandler('click');
              }
            };

            element.addClass(staticClass);

            element.on('mousedown', function () {
              element.addClass(animationClass);
            });

            element.on('animationend', onAnimationEnd);
          }
        }
    };
})

<a ng-click="isMobileMenuOpened = {visible: true}"></a>

Answer 1

停止事件，运行点击动画功能，然后发出新的自定义事件，例如：rootScope.$broadcast(clickAnimationFinished, data).

然后，在其他自定义指令中，您只需订阅：scope.$on('clickAnimationFinished', codeThatWasPreviouslyRunningOnClicks());

您可以通过创建自定义指令并替换ng-click来进一步改善这一点。

如何停止ng-click事件并在以后通过另一个自定义指令运行它

1 个答案: