Nie można uruchomić demo animacji w angularjs

Question

czytam doc kątowe animacji i odtworzone się demo. Po kliknięciu przycisku Fold In tekst zostanie zmieniony na animate define. Wersja demo nie działa poprawnie. Animacja nie działa dobrze.

To jest mój kod: https://jsfiddle.net/jiexishede/5nokogfq/

W Webstorm:
zmienić var app = angular.module('app', []); jak var app = angular.module('app', ['ngAnimate']);. Błąd pokaz:

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) 

Jeśli wiesz, jak rozwiązać ten problem, należy napisać dobre demo. Zagłosuję teraz na twoją odpowiedź.

Answer 1

Mam skopiowane JS z Skrzypek :

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

    }) 

To, co robisz źle, to wielokrotne używanie funkcji settera "module".

W pierwszym wierszu napisał:

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

To będzie zdefiniować nowy moduł o nazwie app i przypisać instancję modułu do zmiennej app.

Z tego miejsca nie można ponownie zadeklarować modułu o nazwie app, a jedynie pobrać wystąpienie tego modułu.

Podczas korzystania z funkcji angular.module z 2 argumentami, używasz "settera", który utworzy nowy moduł. Aby uzyskać instancję, należy użyć funkcji angular.module tylko z argumentem nazwa modułu.

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

Tak, aby naprawić swój kod:

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

utworzyć moduł jak ten

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

a następnie można uzyskać dostęp do modułu przez angular.module('app') lub 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>