Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: visibility variants not triggered when visible on load #171

Merged
merged 1 commit into from
Feb 21, 2024
Merged

fix: visibility variants not triggered when visible on load #171

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions src/directive/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@
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>>) => {
Expand All @@ -24,8 +25,11 @@
// 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
Expand All @@ -35,8 +39,18 @@
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

View workflow job for this annotation

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

View workflow job for this annotation

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) || {}
Expand Down
Loading