All geek questions in one place

Unable to run demo animation in AngularJS

I read the angular animation tutorial and recreated the demo. If you click the Fold In button, the text will be changed as animate define . The demo is not working. Animation does not work.

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

In Webstorm:
I am changing var app = angular.module('app', []); like var app = angular.module('app', ['ngAnimate']); . The error shows:

 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 error, write a good demo. I will vote for your answer right now.

+5
source share
2 answers

I copied JS from your violinist:

  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 uses the module setter function several times.

In the first line you wrote:

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

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

Here you cannot declare a module named app again, just get an instance of this module.

When using the angular.module function with two arguments, you use the "setter", which will create a new module. To get an instance, use the angular.module function angular.module 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) { })
+2
source

create your module as follows

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

and then you can access your module using 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>
+1
source

Source: https://habr.com/ru/post/1262037/

More articles:


All Articles