blast

blast copied to clipboard

It would be great to have a directive for blast :)

In case someone needs it now, here is my hacky solution:

//pattern from https://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/
angular.module('myCoolApp')
.directive('jqBlast', function($timeout, $animate) {
  return {
    restrict: 'A',
    scope: {},
    link: function($scope, element, attrs) {
      return $timeout(function() { //http://stackoverflow.com/a/12641788/719141
        var blasted = element.blast($scope.$eval(attrs.jqBlast));
        angular.forEach(blasted, function(el) {
          $animate.addClass(el, 'animated');
        });
        element.addClass('blasted');
      });
    }
  };
});

use:

<div class="myClass" jq-blast="{delimiter: 'letter'}">{{myTextThatComesFromTheScope}}</div>

.myClass{
    opacity: 0;
}
.myClass.blasted{
    opacity: 1;
}
.myClass .animated-add{
    animation: zoomIn 1000ms;
}

.myClass .animated-add-stagger{
    animation-delay: 70ms;
}

Thank you dbuezas I really appreciate the code snippet. I was having a hard time.