How to create a <<hold to confirm >> button

Question

How would someone go about making a hold to confirm button similar to what designmodo uses?

I have a working version using jQuery but am at a loss how to incorporate this into Angular. Is this something possible with 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

Ok I have a refined answer for this. View here

I dropped using animation and jQuery for two reasons:

1. I could not figure out how to get jQuery done to callback to scope.
2. The jQuery done callback only executed on mouseup after the animation had completed.

There are probably ways to bypass these but I couldn't figure it out.

Instead I used the angular specific animation classes that will trigger a promise on animation completion. Specifically:

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

I didn't need to use .line but kept it in there because lazy.

I also used isolating scope to reference the scope in the controller:

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

I think that is all the tricky parts to this solution. If anyone has any questions feel free to ask.