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

2026-03-16 23:30:23 +00:00 · 2013-07-29 19:45:59 -04:00 · 2013-07-29 19:45:59 -04:00 · e1fe2ac269
commit e1fe2ac269
parent 33d45d8faf
9 changed files with 106 additions and 90 deletions
--- a/docs/components/angular-bootstrap/bootstrap-prettify.js
+++ b/docs/components/angular-bootstrap/bootstrap-prettify.js
@ -7,6 +7,7 @@ var DEPENDENCIES = {
  'angular.js': 'http://code.angularjs.org/' + angular.version.full + '/angular.min.js',
  'angular-resource.js': 'http://code.angularjs.org/' + angular.version.full + '/angular-resource.min.js',
  'angular-route.js': 'http://code.angularjs.org/' + angular.version.full + '/angular-route.min.js',
+  'angular-animate.js': 'http://code.angularjs.org/' + angular.version.full + '/angular-animate.min.js',
  'angular-sanitize.js': 'http://code.angularjs.org/' + angular.version.full + '/angular-sanitize.min.js',
  'angular-cookies.js': 'http://code.angularjs.org/' + angular.version.full + '/angular-cookies.min.js'
 };
@ -188,7 +189,7 @@ directive.ngEmbedApp = ['$templateCache', '$browser', '$rootScope', '$location',
  return {
    terminal: true,
    link: function(scope, element, attrs) {
-      var modules = [],
+      var modules = ['ngAnimate'],
          embedRootScope,
          deregisterEmbedRootScope;

--- a/docs/src/templates/css/animations.css
+++ b/docs/src/templates/css/animations.css
@ -64,18 +64,6 @@
  height:0;
 }

-.example-animate-container {
-  position:relative;
-  background:white;
-  border:1px solid black;
-  height:40px;
-  overflow:hidden;
-}
-
-.example-animate-container > div {
-  padding:1em;
-}
-
 .animate-container.animations-off * {
  -webkit-transition: none;
  -moz-transition: none;
--- 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;
--- 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>
--- 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;

--- 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 { }
--- a/src/ng/directive/ngShowHide.js
+++ b/src/ng/directive/ngShowHide.js
@ -27,37 +27,36 @@
      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 {
+
+      .animate-show.ng-hide-add,
+      .animate-show.ng-hide-remove.ng-hide-remove-active {
        line-height:20px;
        opacity:1;
        padding:10px;
@ -65,19 +64,6 @@
        background:white;
      }

-      .example-show-hide.ng-hide-add {
-        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;
        border:1px solid black;
@ -132,36 +118,36 @@ 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 {
+
+      .animate-hide.ng-hide-add,
+      .animate-hide.ng-hide-remove.ng-hide-remove-active {
        line-height:20px;
        opacity:1;
        padding:10px;
@ -169,19 +155,6 @@ var ngShowDirective = ['$animate', function($animate) {
        background:white;
      }

-      .example-show-hide.ng-hide-add {
-        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;
        border:1px solid black;
--- 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>
--- a/src/ngRoute/directive/ngView.js
+++ b/src/ngRoute/directive/ngView.js
@ -61,10 +61,21 @@ ngRouteModule.directive('ngView', ngViewFactory);
      </file>

      <file name="animations.css">
-        .view-example {
+        .example-animate-container {
+          position:relative;
+          background:white;
+          border:1px solid black;
+          height:40px;
+          overflow:hidden;
+        }
+
+        .example-animate-container > div {
+          padding:10px;
+        }
+
+        .view-example.ng-enter, .view-example.ng-leave {
          -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
          -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
-          -ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
          -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
          transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;