Animate Change Pages

movibe · movibe · commit f4341ec82bef · 2014-12-29T07:28:17.000-02:00
Add css to animate transitions of pages
diff --git a/client/app/modules/core/views/app.html b/client/app/modules/core/views/app.html
@@ -22,7 +22,7 @@
                 </ul>
             </section>
         </aside>
-        <aside ui-view class="right-side">
+        <aside ui-view class="right-side at-view-fade-in at-view-fade-out">
 
         </aside>
     </div>
diff --git a/client/app/styles/main.css b/client/app/styles/main.css
@@ -4,3 +4,26 @@
 .small-box{
   cursor: pointer;
 }
+.at-view-fade-in.ng-enter {
+  -webkit-transition-property: opacity;
+  -moz-transition-property: opacity;
+  -o-transition-property: opacity;
+  transition-property: opacity;
+  -webkit-transition-duration: 1s;
+  -moz-transition-duration: 1s;
+  -o-transition-duration: 1s;
+  transition-duration: 1s;
+  opacity: 0;
+}
+
+.at-view-fade-in.ng-enter-active {
+  opacity: 1;
+}
+
+.at-view-fade-out.ng-leave {
+  display: none;
+}
+
+.at-view-fade-out.ng-leave-active {
+  opacity: 0;
+}
