Merge pull request #4127 from pulibrary/header-transition

Header: Make vue component loading a bit more subtle with a css animation
pulibrary · Aug 20, 2024 · b6a5353 · b6a5353
2 parents 461dad2 + 39b584e
commit b6a5353
Showing 1 changed file with 11 additions and 1 deletion.
diff --git a/app/javascript/orangelight/vue_components/orangelight_header.vue b/app/javascript/orangelight/vue_components/orangelight_header.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container header-container">
     <lux-library-header app-name="Catalog" abbr-name="Catalog" app-url="/" theme="dark">
       <lux-menu-bar type="main-menu" :menu-items="menuItems" @menu-item-clicked="handleMenuItemClicked"></lux-menu-bar>
     </lux-library-header>
@@ -63,3 +63,13 @@ function handleMenuItemClicked(event) {
   }
 }
 </script>
+<style>
+@keyframes fadeIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+.header-container {
+  animation: fadeIn 0.3s;
+}
+</style>