feat: animate search options entrance

standardnotes · Mar 10, 2021 · c6c8d84 · c6c8d84
1 parent 24c5dba
commit c6c8d84
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/app/assets/javascripts/views/notes/notes-view.pug b/app/assets/javascripts/views/notes/notes-view.pug
@@ -26,7 +26,7 @@
             ng-click='self.clearFilterText();',
             ng-show='self.state.noteFilter.text'
             ) ✕
-        label.sk-panel-row.justify-left.mt-2(
+        label.sk-panel-row.justify-left.mt-2.animate-slide-in-top(
           ng-if='self.state.searchIsFocused || self.state.searchOptionsAreFocused || self.state.authorizingSearchOptions'
           style="padding-bottom: 0"
         )

diff --git a/app/assets/stylesheets/_ui.scss b/app/assets/stylesheets/_ui.scss
@@ -97,6 +97,23 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
   justify-self: flex-start;
 }
 
+.animate-slide-in-top {
+  animation: slide-in-top .1s ease-out;
+}
+
+@keyframes slide-in-top {
+  0% {
+    opacity: 0;
+    transform: translateY(-40%);
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+
 .m-0 {
   margin: 0;
 }