Can't run the animation demo in AngularJS

Question

I read the angular animation doc and recreated the demo. If you click the Fold In button, the text will be changed as the animate define. The demo does not work well. The animation doesn't work well.

This is my code: https://jsfiddle.net/jiexishede/5nokogfq/

In the Webstorm:
I change var app = angular.module('app', []); as var app = angular.module('app', ['ngAnimate']);. The error show :

Uncaught Error: [$injector:unpr] Unknown provider: $$isDocumentHiddenProvider <- $$isDocumentHidden <- $$animateQueue <- $animate <- $compile <- $$animateQueue
http://errors.angularjs.org/1.5.8/$injector/unpr?p0=%24%24isDocumentHiddenP…eQueue%20%3C-%20%24animate%20%3C-%20%24compile%20%3C-%20%24%24animateQueue
    at angular.js:68
    at angular.js:4511
    at Object.getService [as get] (angular.js:4664)
    at angular.js:4516
    at getService (angular.js:4664)
    at injectionArgs (angular.js:4688)
    at Object.invoke (angular.js:4710)
    at angular.js:4517
    at getService (angular.js:4664)
    at injectionArgs (angular.js:4688)

If you know how to fix this bug, please write the good demo. I will vote your answer right now.

Answer 1

I've copied the JS from your fiddler:

 var app = angular.module('app', ['ngAnimate']);
   angular.module('app', ['ngAnimate']).animation('.fold-animation', ['$animateCss', function($animateCss) {
            return {
                enter: function(element, doneFn) {
                    var height = element[0].offsetHeight;
                    return $animateCss(element, {
                        addClass: 'red large-text pulse-twice',
                        easing: 'ease-out',
                        from: { height:'0px' },
                        to: { height:height + 'px' },
                        duration: 10 // one second
                    });
                }
            }
        }]);
   angular.module('app', ['ngAnimate']).controller('myctrl', function ($scope) {

    })

What you are doing wrong is using the module "setter" function multiple times.

In the first line you wrote:

var app = angular.module('app', ['ngAnimate']);

That will define a new module called app and assign the module instance to the app variable.

From here, you can not declare a module with the name app again, only get the instance of this module.

When using angular.module function with 2 arguments, you are using the "setter" that will create a new module. To get the instance, use angular.module function with only the module name argument.

angular.module('app', ['ngAnimate']);    
var app = angular.module('app');

So to fix your code:

angular.module('app', ['ngAnimate']);
angular.module('app').animation('.fold-animation', ['$animateCss', function($animateCss) {
            return {
                enter: function(element, doneFn) {
                    var height = element[0].offsetHeight;
                    return $animateCss(element, {
                        addClass: 'red large-text pulse-twice',
                        easing: 'ease-out',
                        from: { height:'0px' },
                        to: { height:height + 'px' },
                        duration: 10 // one second
                    });
                }
            }
        }]);
angular.module('app').controller('myctrl', function ($scope) {

    })