Motion Vue

LayoutGroup

类似 LayoutGroup 在 framer-motion 中，LayoutGroup 将检测其子组件的布局变化并应用布局动画。

类似 LayoutGroup 在 framer-motion 中，LayoutGroup 将检测其子组件的布局变化并应用布局动画。

1. without LayoutGroup

open
open
open

2. with LayoutGroup

open
open
open

属性

id

唯一标识布局组的标识符。如果未提供，则通过其上下文识别该组。

继承

控制布局组从其父组继承属性的方式。可以是：

  • true：继承 id 和group。
  • id：仅继承 id。
  • 分组：仅继承分组。

槽位

默认：默认槽接收 forceRender 函数：

  • forceRender: 当调用此函数时，将强制槽 Motion 组件计算其布局。

::alert{type="warning" icon="lucide:triangle-alert"} 当一个 运动 组件被 布局组 包裹时，其更新将触发 布局组 下所有 运动 组件的布局更新，因此最好触发 运动 的更新而不是调用 forceRender ::

<LayoutGroup>
  <template #default="{ forceRender }">
    ...
    <Motion :layout="true" @click="forceRender">
    </Motion>
    ...
  </template>
</LayoutGroup>

使用布局组

The useLayoutGroup 钩子提供对布局组上下文的访问，允许组件参与布局组并响应强制布局。

<script setup lang="ts">
import { useLayoutGroup } from 'motion-v'

const { forceRender } = useLayoutGroup()
</script>

<template>
  <div>
    <p>This component can be forced to update.</p>
    <button @click="forceRender">
      Force Update
    </button>
  </div>
</template>
Animate Presence
Animate components when they're removed from the Vue tree.
MotionConfig
运动配置组件用于配置子运动组件。