angularjs - Animate a directive when it appears on page -

I am trying to animate a directive in the page while clicking a button using NGMNET. How can I do this for the following code?

I'm trying to follow the examples: but it did not understand how to do it.

Any help will be highly appreciated :)

   & Lt; Ul & gt; & Lt; Li class = "animate" ng-repeat = "names in names: filter: $ scope.name" ng-enamate = "'animated'" & gt; {{Name}} & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Button add-box & gt; Add Box & lt; / Button & gt; & Lt; Div id = "box-container" & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

Box.html

  & lt; Div class = "box" & gt; & Lt; / Div & gt;  

Search.js

  var search app = angular Modules ("Search app", ["NGNET"]); SearchApp.controller ("searchCtrl", function ($ scope) {$ scope.names = ['Sally', 'Kelly', 'Edward', 'Gray', 'Antonia'];}); SearchApp.directive ("box", function () {return {restrict: 'e', ​​templateUrl: "box.html"};}); SearchApp.directive ("addbox", function ($ compilation) {return function ($ scope, element, etter) {element.bind ("click", function () {angular.element (document.getElementById ("box-container" )) .andend ($ collection (" " ($ radius));})}};});  

I was able to solve that NGIF

search Use JS

$ scope.show = true;

Box.html

  & lt; Div class = "box" ng-if = "show" & gt; & Lt; / Div & gt;  

I've read:

for this solution