Question

有人会如何暂停确认按钮，类似于designmodo使用的按钮？

我有一个使用jQuery的工作版本，但我不知道如何将其合并到Angular中。使用ngAnimate可以实现这一点吗？

jsfiddle css：

path {
    stroke-dasharray: 119;
    stroke-dashoffset: 119;
}

.draw {
    -webkit-animation: dash 3s ease forwards;
}    

@-webkit-keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

jsfiddle js：

$('.delete-icon').mousedown(function() {     
    $('path').attr('class', 'draw');
});

$('.delete-icon').mouseup(function() {
    $('path').attr('class', 'progress');
});

$("path").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    console.log('callback');
    $('.delete-icon').hide();
});

Answer 1

因此想出如何做到这一点我想留下答案，万一其他人遇到这个问题。

重要的是弄清楚如何在动画完成时使用jQuery来进行回调。可能有一种方法可以使用Angular，但我能找到的唯一回调是添加/删除类时，这不是我需要的。

http://plnkr.co/edit/Lafds0KA04mcrolR9mHg?p=preview

var app = angular.module("app", ["ngAnimate"]);

app.controller("AppCtrl", function() {
  this.isHidden = false;
  this.deleteIt = function() {
    this.isHidden = !this.isHidden;
  }

  app.hidden = false;
});

app.directive("hideMe", function($animate) {
  return function(scope, element, attrs) {
    scope.$watch(attrs.hideMe, function(newVal) {
      if(newVal) {
        $animate.addClass(element, "draw");
      } else {
        $animate.removeClass(element, "draw");
      }
    });
  }
});

app.animation(".draw", function() {
  return {
    addClass: function(element, className, done) {
      //
      jQuery(element).animate({
        "stroke-dashoffset": 0
      }, 3000, "easeOutCubic", function() {
        console.log(app.hidden);
      });

      return function(cancel) {
        if(cancel) {
          jQuery(element).stop();
        }
      }
    },
    removeClass: function(element, className, done) {
      //
      jQuery(element).animate({
        "stroke-dashoffset": 119
      }, 350, "linear", function() {
        console.log('canceled');
      });

      return function(cancel) {
        jQuery(element).stop();
      }
    }
  }
});

Answer 2

好的，我有一个精确的答案。 View here

我使用动画和jQuery删除了两个原因：

我无法弄清楚如何让jQuery完成回调范围。
jQuery完成回调仅在mouseup之后执行动画已经完成。

可能有办法绕过这些，但我无法弄明白。

相反，我使用了角度特定的动画类，它们将在动画完成时触发一个承诺。具体做法是：

.line.draw {
  -webkit-animation: dash 3s ease forwards;
}
.line.draw-add {
}
.line.draw-add-active {
}
@-webkit-keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

我不需要使用.line但是因为懒惰而保留在那里。

我还使用隔离范围来引用控制器中的范围：

scope: {
  'myAnimate': '=',
  'deleteTodo': '&'
},

我认为这是解决方案的所有棘手部分。如果有任何人有任何问题随时可以询问。

如何创建＆lt; <hold to =“”confirm =“”>＆gt;按钮</保持>

2 个答案: