Composables
useLayout
Documentation for useLayout composable.
This composable is under heavy development and unstable
The useLayout composable helps with layout animations.
Type Definition
function useLayout(
target: AnimeLayoutTargets,
options: AutoLayoutParams
): {
properties: ComputedRef<NonFunctionProperties<AutoLayout>>,
record: () => void,
revert: () => void,
animate: (params?: LayoutAnimationParams) => void
}
Arguments
target
AnimeLayoutTargets required
The wrapper element or selector for the layout transition.
options
AutoLayoutParams
Auto layout parameters. See AnimeJS Layout documentation.
Sample usage
const items = ref([])
const { record, animate } = useLayout('.layout-wrapper', {
duration: 500,
ease: 'inOutQuad'
})
// Trigger layout animation after DOM changes
const addItem = () => {
record()
items.value.push({ name: items.value.length + 1 })
nextTick(animate)
}
<template>
<div class="layout-wrapper">
<div v-for="item in items" :key="item.id" class="layout-item">
{{ item.name }}
</div>
</div>
</template>
Return Value
Returns an object with helper methods to control the layout animation.
| Property | Type | Description |
|---|---|---|
properties | ComputedRef<object> | The current layout properties. |
record | () => void | Record the current layout state. |
revert | () => void | Revert the layout to its original state. |
animate | (params?: LayoutAnimationParams) => void | Animate from the recorded state to the current state. |
API
Types
type AnimeLayoutTargets = DOMTargetSelector | MaybeElementRef<HTMLElement | VueInstance> | null | undefined
See AnimeJS Layout documentation for more details.