title: AngularJS: CSS Animation On Click (ngClick)
body: <p>I've seen several questions related to CSS animations 'on click' in Angular when researching this, but generally without any solid or definitive answers.</p>
  
  <p>I want to know the best practice way to achieve a CSS animation when clicking on an element in an AngularJS environment (1.x). Specifically, lets say we want to utilize an animation from <a href="https://daneden.github.io/animate.css/" rel="nofollow">Animate.CSS</a> and each time we click on the element in question this animation should happen.</p>
  
  <p>Here is the route I have taken currently, but wonder if there might be a better way:</p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div class="play" ng-click="animate($event)"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>js function (in controller):</p>
  
  <pre><code>$scope.animate = function(event) {
      var el = event.srcElement;
      angular.element(el).addClass('animate');
      $timeout(function() {
          angular.element(el).removeClass('animate');
      }, 1000);
  };
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.play.animate {
    animation:0.5s bounceIn ease;
  }
  </code></pre>
  
  <p>I don't particularly love the use of timeout here to remove the class after the animation should be complete. Is ngClick even the answer here, or should I be using a totally custom directive?</p>