edit demo, default transitions

smastrom · Jul 12, 2023 · 5a15250 · 5a15250
1 parent 8ebdc6f
commit 5a15250
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 17 deletions.
diff --git a/demo/Header.vue b/demo/Header.vue
@@ -63,7 +63,7 @@ useFixedHeader(headerRef, {
  width: 1280px;
  max-width: 100%;
  height: 80px;
- margin: 2rem;
+ margin: 1rem;
  padding: 1rem;
  display: flex;
  align-items: center;

diff --git a/demo/WithContainer.vue b/demo/WithContainer.vue
@@ -17,16 +17,18 @@ useFixedHeader(headerRef, {
 <template>
  <div class="Scroll_Container" ref="containerRef">
  <div class="Container">
- <header class="Header" ref="headerRef">
- <h2 class="Global_Logo">Vufh</h2>
+ <header class="Header_Wrapper" ref="headerRef">
+ <div class="Header_Container">
+ <h2 class="Global_Logo">Vufh</h2>
 
- <a
- target="_blank"
- class="Header_Button"
- href="https://github.com/smastrom/vue-use-fixed-header/blob/main/demo/Container.vue"
- >
- View Code
- </a>
+ <a
+ target="_blank"
+ class="Header_Button"
+ href="https://github.com/smastrom/vue-use-fixed-header/blob/main/demo/Container.vue"
+ >
+ View Code
+ </a>
+ </div>
  </header>
  </div>
  </div>
@@ -50,12 +52,15 @@ useFixedHeader(headerRef, {
  background-color: var(--WhiteColor);
 }
 
-.Header {
- justify-content: space-between;
+.Header_Wrapper {
+ padding: 1rem;
  position: sticky;
- top: 1rem;
+ top: 0;
+}
+
+.Header_Container {
+ justify-content: space-between;
  background-color: var(--AccentColor);
- margin: 1rem;
  display: flex;
  align-items: center;
  padding: 1rem;

diff --git a/src/constants.ts b/src/constants.ts
@@ -17,11 +17,9 @@ export const defaultOptions: UseFixedHeaderOptions = {
  enterStyles: {
  transition: `transform 0.3s ${easing} 0s`,
  transform: 'translateY(0px)',
- opacity: 1,
  },
  leaveStyles: {
- transition: `transform 0.6s ${easing} 0s, opacity 0.6s ${easing} 0s`,
+ transition: `transform 0.5s ${easing} 0s`,
  transform: 'translateY(-100%)',
- opacity: 0,
  },
 }