Question

我试图在自定义指令中使用$animate服务。我遇到的问题是$animate服务没有立即应用指定的类（可能是$apply的时间问题），第一个动画也没有完成{ {1}}删除该课程。

我想：

$animate始终启动动画
动画总是完成
将动画设置为＆＃39;对于延长的mousedown事件
动画在两者完成动画和 mousedown之后立即结束。

换句话说，我从不希望动画能够跳跃。我更喜欢使用mouseup，但此时我还是愿意尝试其他解决方案...

请不要在解决方案中使用jQuery。

＆＃13;

$animate

＆＃13;

angular.module('app', [])
  .directive('onActivate', function($parse, $q, $animate, $timeout) {
    return {
      restrict: 'A',
      link: function(scope, element, attr) {
        var hasTouch = false;
        var handler = $parse(attr.onActivate);

        element.one('mousedown', function() {
          if (!hasTouch) {
            console.log('Clicked!');
            scope.$apply(function() {
              $animate.addClass(element, 'pressed');
            });

            element.on('mousedown', function() {
              scope.$apply(function() {
                $animate.addClass(element, 'pressed');
              });
            });
            element.on('mouseup', function() {
              scope.$apply(function() {
                $animate.removeClass(element, 'pressed');
              });
            });
            element.on('click', function(event) {
              scope.$evalAsync(handler(scope, {
                $event: event
              }));
            });
          }
        });
        element.one('touchstart', function(event) {
          hasTouch = true;

          $animate.addClass(element, 'pressed');
          
          element.on('touchstart', function() {
            $animate.addClass(element, 'pressed');
          });
          element.on('touchend touchcancel', function() {
            $animate.removeClass(element, 'pressed');
          });
          
          element.on('touchend', function(event) {
            scope.$evalAsync(handler(scope, {
              $event: event
            }));
          });
        });
      }
    }
  })

＆＃13;

/* Vendor prefixes are handled automatically
   by prefixfree */

@keyframes grow {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.75);
  }
}

button {
  width: 5rem;
  height: 2rem;
  transition: all 1s ease;
}
button.pressed {
  transition: none;
  animation: grow 1s ease;
  transform: scale(0.75);
}

button:not(.pressed) {
  transform: scale(1);
}

＆＃13;

AngularJS中事件的触发按钮动画

0 个答案: