chore(ngIf): Add animation code to ngIf example and docs text to ngAnimate docs

1 files changed, 32 insertions, 6 deletions

diff --git a/src/ng/directive/ngIf.js b/src/ng/directive/ngIf.js
index f1ceccda..492506c0 100755
--- a/src/ng/directive/ngIf.js
+++ b/src/ng/directive/ngIf.js
@@ -43,12 +43,38 @@
  *     the element is removed from the DOM tree (HTML).
  *
  * @example
-   <doc:example>
-     <doc:source>
-        Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
-        Show when checked: <span ng-if="checked">I'm removed when the checkbox is unchecked</span>
-     </doc:source>
-   </doc:example>
+  <example animations="true">
+    <file name="index.html">
+      Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
+      Show when checked:
+      <span ng-if="checked" ng-animate="'example'">
+        I'm removed when the checkbox is unchecked.
+      </span>
+    </file>
+    <file name="animations.css">
+      .example-leave-setup, .example-enter-setup {
+        -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
+        -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
+        -ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
+        -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
+        transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
+      }
+
+      .example-enter-setup {
+        opacity:0;
+      }
+      .example-enter-setup.example-enter-start {
+        opacity:1;
+      }
+
+      .example-leave-setup {
+        opacity:1;
+      }
+      .example-leave-setup.example-leave-start {
+        opacity:0;
+      }
+    </file>
+  </example>
  */
 var ngIfDirective = ['$animator', function($animator) {
   return {