Ajout d'animations de changement de page

Geoffrey PREUD'HOMME
1 parent 501a9b80
Showing 4 changed files with 27 additions and 7 deletions Show diff stats
bower.json
public/css/style.css
public/js/app.js
public/views/index.html
@@ -9,6 +9,7 @@
     "jsencrypt": "~2.1.0",
     "animate.css": "~3.2.6",
     "remarkable-bootstrap-notify": "~3.0.1",
-    "angular-ladda": "~0.2.2"
+    "angular-ladda": "~0.2.2",
+    "angular-animate": "~1.3.15"
   }
 }
@@ -6,10 +6,26 @@ body {
     padding-top: 50px;
 }
  
-#membre-list {
-    width: 90%;
-}
-
 [data-notify="title"] {
     display: block;
 }
+
+#ngViewAnimationContainer {
+    position: relative;
+}
+
+[ng-view].ng-enter {
+    position: absolute;
+    -webkit-animation: zoomIn 0.5s;
+    animation: zoomIn 0.5s;
+}
+
+[ng-view].ng-leave {
+    position: absolute;
+    -webkit-animation: fadeOutDown 0.5s;
+    animation: fadeOutDown 0.5s;
+}
+
+#membre-list {
+    width: 90%;
+}
-angular.module('ciApp', ['ngRoute', 'SessionsCtrl', 'ConnectCtrl', 'MembreCtrl']).config(['$routeProvider', '$locationProvider',
+angular.module('ciApp', ['ngRoute', 'ngAnimate', 'SessionsCtrl', 'ConnectCtrl', 'MembreCtrl']).config(['$routeProvider', '$locationProvider',
     function ($routeProvider, $locationProvider) {
         $routeProvider
             .when('/', {
@@ -13,6 +13,7 @@
     <script src="libs/jquery/dist/jquery.min.js"></script>
     <script src="libs/angular/angular.min.js"></script>
     <script src="libs/angular-route/angular-route.min.js"></script>
+    <script src="/libs/angular-animate/angular-animate.js"></script>
     <script src="libs/angular-bootstrap/ui-bootstrap.min.js"></script>
     <script src="libs/jsencrypt/bin/jsencrypt.min.js"></script>
     <script src="libs/remarkable-bootstrap-notify/bootstrap-notify.min.js"></script>
@@ -48,7 +49,9 @@
                 </div>
             </div>
         </nav>
-        <div ng-view></div>
+        <div id="ngViewAnimationContainer">
+            <div ng-view></div>
+        </div>
     </div>
 </body>