Core - Add transitionOpacity prop

Author: smastrom

src/constants.ts

@@ -3,11 +3,11 @@ import type { UseFixedHeaderOptions } from './types'
 
 export const TRANSITION_STYLES = {
    enterStyles: {
-      transition: `transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s`,
+      transition: `transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s, opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s`,
       transform: 'translateY(0px)',
    },
    leaveStyles: {
-      transition: `transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s`,
+      transition: `transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s, opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s`,
       transform: 'translateY(-101%)',
    },
 }

src/useFixedHeader.ts

@@ -93,10 +93,14 @@ export function useFixedHeader(
          if (isInstant) {
             setStyles({
                transform: leaveStyles.transform,
+               ...(config.transitionOpacity ? { opacity: 0 } : {}),
                visibility: 'hidden',
             })
          } else {
-            setStyles({ transform: enterStyles.transform })
+            setStyles({
+               transform: enterStyles.transform,
+               ...(config.transitionOpacity ? { opacity: 1 } : {}),
+            })
          }
 
          internals.isMount = false
@@ -125,6 +129,7 @@ export function useFixedHeader(
 
       setStyles({
          ...enterStyles,
+         ...(config.transitionOpacity ? { opacity: 1 } : {}),
          visibility: '' as CSS['visibility'],
       })
 
@@ -134,7 +139,7 @@ export function useFixedHeader(
    function onHidden() {
       if (state.value === State.LEAVE) return
 
-      setStyles(leaveStyles)
+      setStyles({ ...leaveStyles, ...(config.transitionOpacity ? { opacity: 0 } : {}) })
 
       setState(State.LEAVE)