From 81923f1e41560327f7de6e8fddfda0d2612658f3 Mon Sep 17 00:00:00 2001 From: Matias Niemelä Date: Tue, 18 Jun 2013 13:59:57 -0400 Subject: feat(ngAnimate): complete rewrite of animations - ngAnimate directive is gone and was replaced with class based animations/transitions - support for triggering animations on css class additions and removals - done callback was added to all animation apis - $animation and $animator where merged into a single $animate service with api: - $animate.enter(element, parent, after, done); - $animate.leave(element, done); - $animate.move(element, parent, after, done); - $animate.addClass(element, className, done); - $animate.removeClass(element, className, done); BREAKING CHANGE: too many things changed, we'll write up a separate doc with migration instructions --- docs/src/example.js | 2 +- docs/src/ngdoc.js | 67 +++++++---------------------------- docs/src/templates/css/animations.css | 43 +++++++++++----------- docs/src/templates/index.html | 13 +++---- docs/src/templates/js/docs.js | 2 +- 5 files changed, 44 insertions(+), 83 deletions(-) (limited to 'docs/src') diff --git a/docs/src/example.js b/docs/src/example.js index cdbc24a7..9471b3fa 100644 --- a/docs/src/example.js +++ b/docs/src/example.js @@ -134,7 +134,7 @@ exports.Example.prototype.toHtmlTabs = function() { exports.Example.prototype.toHtmlEmbed = function() { var out = []; - out.push('
'); + var animations = animations.split("\n"); + animations.forEach(function(ani) { + dom.html('
  • '); + dom.text(ani); + dom.html('
    • '); + }); + dom.html(''); + }); + dom.html('Click here to learn more about the steps involved in the animation.'); + } if(params.length > 0) { dom.html('

    Parameters

    '); dom.html(''); @@ -538,18 +551,6 @@ Doc.prototype = { dom.html(''); dom.html('
    '); } - if(this.animations) { - dom.h('Animations', this.animations, function(animations){ - dom.html(''); - }); - } }, html_usage_returns: function(dom) { @@ -665,48 +666,6 @@ Doc.prototype = { dom.text(''); }); } - if(self.animations) { - var animations = [], matches = self.animations.split("\n"); - matches.forEach(function(ani) { - var name = ani.match(/^\s*(.+?)\s*-/)[1]; - animations.push(name); - }); - - dom.html('with animations'); - var comment; - if(animations.length == 1) { - comment = 'The ' + animations[0] + ' animation is supported'; - } - else { - var rhs = animations[animations.length-1]; - var lhs = ''; - for(var i=0;i0) { - lhs += ', '; - } - lhs += animations[i]; - } - comment = 'The ' + lhs + ' and ' + rhs + ' animations are supported'; - } - var element = self.element || 'ANY'; - dom.code(function() { - dom.text('//' + comment + "\n"); - dom.text('<' + element + ' '); - dom.text(dashCase(self.shortName)); - renderParams('\n ', '="', '"', true); - dom.text(' ng-animate="{'); - animations.forEach(function(ani, index) { - if (index) { - dom.text(', '); - } - dom.text(ani + ': \'' + ani + '-animation\''); - }); - dom.text('}">\n ...\n'); - dom.text(''); - }); - - dom.html('Click here to learn more about the steps involved in the animation.'); - } } self.html_usage_directiveInfo(dom); self.html_usage_parameters(dom); diff --git a/docs/src/templates/css/animations.css b/docs/src/templates/css/animations.css index 2d54bbfb..7324a8a1 100644 --- a/docs/src/templates/css/animations.css +++ b/docs/src/templates/css/animations.css @@ -1,4 +1,4 @@ -.reveal { +.reveal.ng-enter { -webkit-transition:1s linear all; -moz-transition:1s linear all; -o-transition:1s linear all; @@ -6,7 +6,7 @@ opacity:0; } -.reveal.reveal-active { +.reveal.ng-enter.ng-enter-active { opacity:1; } @@ -15,48 +15,45 @@ overflow:hidden; } -.slide-reveal { +.slide-reveal > .ng-enter { -webkit-transition:0.5s linear all; -moz-transition:0.5s linear all; -o-transition:0.5s linear all; transition:0.5s linear all; - opacity:0.5; + opacity:0.5; position:relative; opacity:0; top:10px; } -.slide-reveal.slide-reveal-active { +.slide-reveal > .ng-enter.ng-enter-active { top:0; opacity:1; } -.expand-enter { +.expand.ng-enter, +.expand.ng-leave { -webkit-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all; -moz-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all; -o-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all; transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all; - +} +.expand.ng-enter { opacity:0; line-height:0; height:0!important; } -.expand-enter.expand-enter-active { +.expand.ng-enter.expand.ng-enter-active { opacity:1; line-height:20px; height:20px!important; } -.expand-leave { - -webkit-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all; - -moz-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all; - -o-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all; - transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all; - +.expand.ng-leave { opacity:1; height:20px; } -.expand-leave.expand-leave-active { +.expand.ng-leave.expand.ng-leave-active { opacity:0; height:0; } @@ -73,32 +70,36 @@ padding:1em; } -.animator-container.animations-off * { +.animate-container.animations-off * { -webkit-transition: none; -moz-transition: none; -o-transition: color 0 ease-in; /* opera is special :) */ transition: none; } -.foldout-show, .foldout-enter, .foldout-hide { +.foldout.ng-enter, +.foldout.ng-hide-add, +.foldout.ng-hide-remove { -webkit-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all; -moz-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all; -o-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all; transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all; } -.foldout-show, .foldout-enter { +.foldout.ng-hide-remove, +.foldout.ng-enter { opacity:0; } -.foldout-show.foldout-show-active, .foldout-hide.foldout-hide-active { +.foldout.ng-hide-remove.ng-hide-remove-active, +.foldout.ng-enter.ng-enter-active { opacity:1; } -.foldout-hide { +.foldout.ng-hide-add { opacity:1; } -.foldout-hide.foldout-hide-active { +.foldout.ng-hide-add.ng-hide-active { opacity:0; } diff --git a/docs/src/templates/index.html b/docs/src/templates/index.html index 82a5c87e..3f3e83c8 100644 --- a/docs/src/templates/index.html +++ b/docs/src/templates/index.html @@ -43,6 +43,7 @@ addTag('script', {src: path('angular-cookies.js') }, sync); addTag('script', {src: path('angular-sanitize.js') }, sync); addTag('script', {src: path('angular-mobile.js') }, sync); + addTag('script', {src: path('angular-animate.js') }, sync); addTag('script', {src: 'components/angular-bootstrap.js' }, sync); addTag('script', {src: 'components/angular-bootstrap-prettify.js' }, sync); addTag('script', {src: 'components/google-code-prettify.js' }, sync); @@ -201,7 +202,7 @@
    -
    +
    @@ -283,21 +284,21 @@
  • directive
    • -
  • +
  • {{page.shortName}}
  • filter
    • -
  • +
  • {{page.shortName}}
  • service
    • -
  • +
  • {{service.name}}
    • @@ -305,7 +306,7 @@
  • Types
    • -
  • +
  • {{page.shortName}}
    • @@ -334,7 +335,7 @@
    Loading...
    -
    +

    Discussion

    diff --git a/docs/src/templates/js/docs.js b/docs/src/templates/js/docs.js index 7cac6a9a..05b09571 100644 --- a/docs/src/templates/js/docs.js +++ b/docs/src/templates/js/docs.js @@ -803,7 +803,7 @@ docsApp.controller.DocsController = function($scope, $location, $window, $cookie }; -angular.module('docsApp', ['ngResource', 'ngRoute', 'ngCookies', 'ngSanitize', 'bootstrap', 'bootstrapPrettify', 'docsData']). +angular.module('docsApp', ['ngResource', 'ngRoute', 'ngCookies', 'ngSanitize', 'ngAnimate', 'bootstrap', 'bootstrapPrettify', 'docsData']). config(function($locationProvider) { $locationProvider.html5Mode(true).hashPrefix('!'); }). -- cgit v1.2.3