chore(ngdocs): all animation-supported directives working with docs examples and jsFiddle/Plunkr pages

6 files changed, 89 insertions, 73 deletions

diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js
index 0c4d23f0..001f67bb 100644
--- a/src/ng/directive/ngClass.js
+++ b/src/ng/directive/ngClass.js
@@ -109,8 +109,7 @@ function classDirective(name, selector) {
       <span ng-class="myVar">Sample Text</span>
      </file>
      <file name="style.css">
-       .my-class-add,
-       .my-class-remove {
+       .my-class-add, .my-class-remove {
          -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;
          -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
diff --git a/src/ng/directive/ngIf.js b/src/ng/directive/ngIf.js
index 9d99d859..87c976a9 100755
--- a/src/ng/directive/ngIf.js
+++ b/src/ng/directive/ngIf.js
@@ -47,26 +47,31 @@
     <file name="index.html">
       Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
       Show when checked:
-      <span ng-if="checked" class="example-if">
+      <span ng-if="checked" class="animate-if">
         I'm removed when the checkbox is unchecked.
       </span>
     </file>
     <file name="animations.css">
-      .example-if.ng-enter,
-      .example-if.ng-leave {
+      .animate-if {
+        background:white;
+        border:1px solid black;
+        padding:10px;
+      }
+
+      .animate-if.ng-enter, .animate-if.ng-leave {
         -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;
         -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-if.ng-enter,
-      .example-if.ng-leave.ng-leave-active {
+      .animate-if.ng-enter,
+      .animate-if.ng-leave.ng-leave-active {
         opacity:0;
       }
 
-      .example-if.ng-enter.ng-enter-active,
-      .example-if.ng-leave {
+      .animate-if.ng-enter.ng-enter-active,
+      .animate-if.ng-leave {
         opacity:1;
       }
     </file>
diff --git a/src/ng/directive/ngInclude.js b/src/ng/directive/ngInclude.js
index 2ab9f847..0f1f245c 100644
--- a/src/ng/directive/ngInclude.js
+++ b/src/ng/directive/ngInclude.js
@@ -71,10 +71,21 @@
       Content of template2.html
     </file>
     <file name="animations.css">
+      .example-animate-container {
+        position:relative;
+        background:white;
+        border:1px solid black;
+        height:40px;
+        overflow:hidden;
+      }
+
+      .example-animate-container > div {
+        padding:10px;
+      }
+
       .include-example.ng-enter, .include-example.ng-leave {
         -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;
 
diff --git a/src/ng/directive/ngRepeat.js b/src/ng/directive/ngRepeat.js
index 8f12b7c2..50be2a61 100644
--- a/src/ng/directive/ngRepeat.js
+++ b/src/ng/directive/ngRepeat.js
@@ -127,7 +127,7 @@
       ]">
         I have {{friends.length}} friends. They are:
         <input type="search" ng-model="q" placeholder="filter friends..." />
-        <ul>
+        <ul class="example-animate-container">
           <li class="animate-repeat" ng-repeat="friend in friends | filter:q">
             [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
           </li>
@@ -135,7 +135,22 @@
       </div>
     </file>
     <file name="animations.css">
-      .animate-repeat {
+      .example-animate-container {
+        background:white;
+        border:1px solid black;
+        list-style:none;
+        margin:0;
+        padding:0;
+      }
+
+      .example-animate-container > li {
+        padding:10px;
+        list-style:none;
+      }
+
+      .animate-repeat.ng-enter,
+      .animate-repeat.ng-leave,
+      .animate-repeat.ng-move {
         -webkit-transition:all linear 0.5s;
         -moz-transition:all linear 0.5s;
         -o-transition:all linear 0.5s;
@@ -145,19 +160,25 @@
       .animate-repeat.ng-enter {
         line-height:0;
         opacity:0;
+        padding-top:0;
+        padding-bottom:0;
       }
       .animate-repeat.ng-enter.ng-enter-active {
         line-height:20px;
         opacity:1;
+        padding:10px;
       }
 
       .animate-repeat.ng-leave {
         opacity:1;
         line-height:20px;
+        padding:10px;
       }
       .animate-repeat.ng-leave.ng-leave-active {
         opacity:0;
         line-height:0;
+        padding-top:0;
+        padding-bottom:0;
       }
 
       .animate-repeat.ng-move { }
diff --git a/src/ng/directive/ngShowHide.js b/src/ng/directive/ngShowHide.js
index 1bba11ef..e5ce713d 100644
--- a/src/ng/directive/ngShowHide.js
+++ b/src/ng/directive/ngShowHide.js
@@ -27,56 +27,42 @@
       Click me: <input type="checkbox" ng-model="checked"><br/>
       <div>
         Show:
-        <span class="check-element example-show-hide" ng-show="checked">
+        <div class="check-element animate-show" ng-show="checked">
           <span class="icon-thumbs-up"></span> I show up when your checkbox is checked.
-        </span>
+        </div>
       </div>
       <div>
         Hide:
-        <span class="check-element example-show-hide" ng-hide="checked">
+        <div class="check-element animate-show" ng-hide="checked">
           <span class="icon-thumbs-down"></span> I hide when your checkbox is checked.
-        </span>
+        </div>
       </div>
     </file>
     <file name="animations.css">
-      .example-show-hide {
+      .animate-show.ng-hide-add, 
+      .animate-show.ng-hide-remove {
         -webkit-transition:all linear 0.5s;
         -moz-transition:all linear 0.5s;
-        -ms-transition:all linear 0.5s;
         -o-transition:all linear 0.5s;
         transition:all linear 0.5s;
-        display:block;
-      }
-      .example-show-hide.ng-hide {
-        display:none;
+        display:block!important;
       }
 
-      .example-show-hide.ng-hide-remove {
-        display:block;
+      .animate-show.ng-hide-add.ng-hide-add-active,
+      .animate-show.ng-hide-remove {
         line-height:0;
         opacity:0;
         padding:0 10px;
       }
-      .example-show-hide.ng-hide-remove.ng-hide-remove-active {
-        line-height:20px;
-        opacity:1;
-        padding:10px;
-        border:1px solid black;
-        background:white;
-      }
 
-      .example-show-hide.ng-hide-add {
+      .animate-show.ng-hide-add,
+      .animate-show.ng-hide-remove.ng-hide-remove-active {
         line-height:20px;
         opacity:1;
         padding:10px;
         border:1px solid black;
         background:white;
       }
-      .example-show-hide.ng-hide-add.ng-hide-add-active {
-        line-height:0;
-        opacity:0;
-        padding:0 10px;
-      }
 
       .check-element {
         padding:10px;
@@ -132,55 +118,42 @@ var ngShowDirective = ['$animate', function($animate) {
       Click me: <input type="checkbox" ng-model="checked"><br/>
       <div>
         Show:
-        <span class="check-element example-show-hide" ng-show="checked">
+        <div class="check-element animate-hide" ng-show="checked">
           <span class="icon-thumbs-up"></span> I show up when your checkbox is checked.
-        </span>
+        </div>
       </div>
       <div>
         Hide:
-        <span class="check-element example-show-hide" ng-hide="checked">
+        <div class="check-element animate-hide" ng-hide="checked">
           <span class="icon-thumbs-down"></span> I hide when your checkbox is checked.
-        </span>
+        </div>
       </div>
     </file>
     <file name="animations.css">
-      .example-show-hide {
+      .animate-hide.ng-hide-add, 
+      .animate-hide.ng-hide-remove {
         -webkit-transition:all linear 0.5s;
         -moz-transition:all linear 0.5s;
         -o-transition:all linear 0.5s;
         transition:all linear 0.5s;
-        display:block;
-      }
-      .example-show-hide.ng-hide {
-        display:none;
+        display:block!important;
       }
 
-      .example-show-hide.ng-hide-remove {
-        display:block;
+      .animate-hide.ng-hide-add.ng-hide-add-active,
+      .animate-hide.ng-hide-remove {
         line-height:0;
         opacity:0;
         padding:0 10px;
       }
-      .example-show-hide.ng-hide-remove.ng-hide-remove-active {
-        line-height:20px;
-        opacity:1;
-        padding:10px;
-        border:1px solid black;
-        background:white;
-      }
 
-      .example-show-hide.ng-hide-add {
+      .animate-hide.ng-hide-add,
+      .animate-hide.ng-hide-remove.ng-hide-remove-active {
         line-height:20px;
         opacity:1;
         padding:10px;
         border:1px solid black;
         background:white;
       }
-      .example-show-hide.ng-hide-add.ng-hide-add-active {
-        line-height:0;
-        opacity:0;
-        padding:0 10px;
-      }
 
       .check-element {
         padding:10px;
diff --git a/src/ng/directive/ngSwitch.js b/src/ng/directive/ngSwitch.js
index 38a123a2..1ddf90fb 100644
--- a/src/ng/directive/ngSwitch.js
+++ b/src/ng/directive/ngSwitch.js
@@ -51,8 +51,7 @@
         </select>
         <tt>selection={{selection}}</tt>
         <hr/>
-        <div
-          class="example-animate-container animate-switch"
+        <div class="animate-switch-container"
           ng-switch on="selection">
             <div ng-switch-when="settings">Settings Div</div>
             <div ng-switch-when="home">Home Span</div>
@@ -67,7 +66,20 @@
       }
     </file>
     <file name="animations.css">
-      .animate-switch > * {
+      .animate-switch-container {
+        position:relative;
+        background:white;
+        border:1px solid black;
+        height:40px;
+        overflow:hidden;
+      }
+
+      .animate-switch-container > div {
+        padding:10px;
+      }
+
+      .animate-switch-container > .ng-enter,
+      .animate-switch-container > .ng-leave {
         -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;
         -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
@@ -80,22 +92,17 @@
         bottom:0;
       }
 
-      .example-animate-container > * {
-        display:block;
-        padding:10px;
-      }
-
-      .animate-switch > .ng-enter {
+      .animate-switch-container > .ng-enter {
         top:-50px;
       }
-      .animate-switch > .ng-enter.ng-enter-active {
+      .animate-switch-container > .ng-enter.ng-enter-active {
         top:0;
       }
 
-      .animate-switch > .ng-leave {
+      .animate-switch-container > .ng-leave {
         top:0;
       }
-      .animate-switch > .ng-leave.ng-leave-active {
+      .animate-switch-container > .ng-leave.ng-leave-active {
         top:50px;
       }
     </file>