Unable to execute the animation demo on AngularJS

Question

Unable to execute the animation demo on AngularJS

After reading through the angular animation documentation, I decided to try and recreate the demo myself. However, when I clicked the Fold In button, the text did not change as expected based on the animate define. It seems that there are issues with the demo and the way the animation is implemented.

You can find my code here: https://jsfiddle.net/jiexishede/5nokogfq/

When working in Webstorm, I made a modification by updating

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

to

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

. This resulted in an error message:

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 have a solution to this issue and can provide a working demo, please share it. I will be happy to upvote your answer. Thank you!

javascript angularjs

Answer 1

Answer №1

After studying your code from the 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) {

    })

You are making a mistake by using the module "setter" function multiple times.

The initial declaration is as follows:

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

This defines a new module named app and assigns the module instance to the variable app.

Once defined, you cannot declare a module with the name app again; you can only fetch the instance of this module.

When utilizing the angular.module function with 2 arguments, you are creating a new module. To obtain the instance, employ the angular.module function with solely the module name argument.

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

To rectify 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) {

    })

Answer 2

After studying your code from the 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) {

    })

You are making a mistake by using the module "setter" function multiple times.

The initial declaration is as follows:

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

This defines a new module named app and assigns the module instance to the variable app.

Once defined, you cannot declare a module with the name app again; you can only fetch the instance of this module.

When utilizing the angular.module function with 2 arguments, you are creating a new module. To obtain the instance, employ the angular.module function with solely the module name argument.

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

To rectify 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) {

    })

Answer 3

Answer №2

Here is an example of how you can create your module:

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

You can then access your module using either angular.module('app') or app

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

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
      });
    }
  }
}]);

app.controller('myctrl', function ($scope) {
})

.red { background:red; color: purple}
        .large-text { font-size:20px; }

        /* We can also use a keyframe animation and $animateCss will make it work alongside the transition */

        .pulse-twice {
            animation: 0.5s pulse linear 2;
            -webkit-animation: 0.5s pulse linear 2;
        }

        @keyframes pulse {
            from { transform: scale(0.5); }
            to { transform: scale(1.5); }
        }

        @-webkit-keyframes pulse {
            from { -webkit-transform: scale(0.5); }
            to { -webkit-transform: scale(1.5); }
        }

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>

<body  ng-app="app" ng-controller="myctrl">
<div ng-if="onOff" class="fold-animation">
    This element will go BOOM
</div>
<button ng-click="onOff = true">Fold In</button>
</body>

Answer 4

Here is an example of how you can create your module:

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

You can then access your module using either angular.module('app') or app

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

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
      });
    }
  }
}]);

app.controller('myctrl', function ($scope) {
})

.red { background:red; color: purple}
        .large-text { font-size:20px; }

        /* We can also use a keyframe animation and $animateCss will make it work alongside the transition */

        .pulse-twice {
            animation: 0.5s pulse linear 2;
            -webkit-animation: 0.5s pulse linear 2;
        }

        @keyframes pulse {
            from { transform: scale(0.5); }
            to { transform: scale(1.5); }
        }

        @-webkit-keyframes pulse {
            from { -webkit-transform: scale(0.5); }
            to { -webkit-transform: scale(1.5); }
        }

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>

<body  ng-app="app" ng-controller="myctrl">
<div ng-if="onOff" class="fold-animation">
    This element will go BOOM
</div>
<button ng-click="onOff = true">Fold In</button>
</body>

Unable to execute the animation demo on AngularJS

Answer №1

Answer №2

Similar questions

Display images next to each other with no need for a scroll bar

How to Conceal Axis Label in an HTML5 Canvas Line Chart

Disable button with Checkbox Javascript functionality

Ways to retrieve the year and month from a given date

What is the process for uploading an image with express-fileupload?

Ways to ensure that a JavaScript code runs only once within React components

After deploying to Firebase, animations suddenly cease to function

Is anyone knowledgeable about <?php bp_activity_id() ?> in BuddyPress?

AngularJS module dependencies are not functioning

Having trouble getting Vue Router's this.$router.push method to work within Vue component methods

Retrieving additional parameters from an HTTP request

Filtering data in a table using Vue.js on the client side

Guide on integrating Materialize into an Angular 2 project

socket.io / settings when establishing a connection

The file selection feature in the browser is malfunctioning when attempting to upload files using either JQuery or JavaScript

Printing a list of values from a C# page to the presentation layer (ASPX)

What is the quickest method to forward a page to a different web address?

Converting line breaks into a visible string format within Angular

Best Practices for Converting TypeScript to JavaScript

Execute a JavaScript function triggered by PHP validation and form submission