Skip to content

Commit

Permalink
fix: visibility variants not triggered when visible on load (#171)
Browse files Browse the repository at this point in the history
  • Loading branch information
BobbieGoede authored Feb 21, 2024
1 parent 4d0c622 commit eddd121
Showing 1 changed file with 16 additions and 2 deletions.
18 changes: 16 additions & 2 deletions src/directive/index.ts
Original file line number Diff line number Diff line change
@@ -2,10 +2,11 @@ import type { Directive, DirectiveBinding, Ref, VNode } from 'vue'
import defu from 'defu'
import { ref, unref } from 'vue'
import { motionState } from '../features/state'
import type { MotionVariants } from '../types'
import type { MotionInstance, MotionVariants } from '../types'
import { useMotion } from '../useMotion'
import { resolveVariants } from '../utils/directive'
import { variantToStyle } from '../utils/transform'
import { registerVisibilityHooks } from '../features/visibilityHooks'

export function directive<T extends string>(variants: MotionVariants<T> = {}): Directive<HTMLElement | SVGElement> {
const register = (el: HTMLElement | SVGElement, binding: DirectiveBinding, node: VNode<any, HTMLElement | SVGElement, Record<string, any>>) => {
@@ -24,8 +25,11 @@ export function directive<T extends string>(variants: MotionVariants<T> = {}): D
// Resolve variants from node props
resolveVariants<T>(node, variantsRef)

// Disable visibilityHooks, these will be registered in `mounted`
const motionOptions = { eventListeners: true, lifeCycleHooks: true, syncVariants: true, visibilityHooks: false }

// Create motion instance
const motionInstance = useMotion(el, variantsRef)
const motionInstance = useMotion(el, variantsRef, motionOptions)

// Pass the motion instance via the local element
// @ts-expect-error - we know that the element is a HTMLElement
@@ -35,8 +39,18 @@ export function directive<T extends string>(variants: MotionVariants<T> = {}): D
if (key) motionState[key] = motionInstance
}

const mounted = (
el: (HTMLElement | SVGElement) & { motionInstance?: MotionInstance<string, MotionVariants<T>> },
binding: DirectiveBinding,

Check warning on line 44 in src/directive/index.ts

GitHub Actions / ci (ubuntu-latest, 18)

'binding' is defined but never used. Allowed unused args must match /^_/u
node: VNode<any, (HTMLElement | SVGElement) & { motionInstance?: MotionInstance<string, MotionVariants<T>> }, Record<string, any>>,

Check warning on line 45 in src/directive/index.ts

GitHub Actions / ci (ubuntu-latest, 18)

'node' is defined but never used. Allowed unused args must match /^_/u
) => {
// Visibility hooks
el.motionInstance && registerVisibilityHooks(el.motionInstance)
}

return {
created: register,
mounted,
getSSRProps(binding, node) {
// Get initial value from binding
let { initial: bindingInitial } = binding.value || (node && node?.props) || {}

0 comments on commit eddd121

Please sign in to comment.