feat: slightly improve all animations related to entering or leaving …

…a page
johannesjo · Apr 6, 2018 · 6572fd9 · 6572fd9
1 parent 9bda05e
commit 6572fd9
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/app-src/scripts/daily-planner/_daily-planner-d.scss b/app-src/scripts/daily-planner/_daily-planner-d.scss
@@ -18,10 +18,14 @@ daily-planner {
   .add-task-form {
     margin: 20px auto;
     max-width: $component-max-width;
-
-    animation: $transition-duration-m attention-for-input-daily-planner ease-in;
-    animation-delay: $page-transition-duration*0.75;
     backface-visibility: hidden;
+    animation: $transition-duration-m attention-for-input-daily-planner linear;
+    transform: translateZ(0);
+
+    [ui-view].ng-enter & {
+      // only start after view is complete
+      animation: none;
+    }
 
     ng-md-icon {
       width: 32px;
@@ -38,6 +42,9 @@ daily-planner {
   0% {
     transform: scale(1);
   }
+  25% {
+    transform: scale(1.05, 1.2);
+  }
   50% {
     transform: scale(1.05, 1.2);
   }

diff --git a/app-src/scripts/work-view/_work-view-d.scss b/app-src/scripts/work-view/_work-view-d.scss
@@ -10,7 +10,13 @@ work-view {
 
   .task {
     &.is-current {
+      transform: translateZ(0);
+      backface-visibility: hidden;
       animation: $transition-duration-s attention-for-current-task;
+      [ui-view].ng-enter & {
+        // only start after view is complete
+        animation: none;
+      }
     }
   }
 }

diff --git a/app-src/styles/components/_ui-view.scss b/app-src/styles/components/_ui-view.scss
@@ -3,6 +3,11 @@
   height: 65px;
 }
 
+[ui-view] {
+  backface-visibility: hidden;
+  transform: translateZ(0);
+}
+
 $this-transition-duration: $page-transition-duration;
 [ui-view].ng-enter {
   transition: all $this-transition-duration $ease-in-out-quint;