LayoutGroup
带有 layout 属性的 motion 组件将在每次提交 React 重新渲染或其 layoutDependency 属性更改时检测布局更改并进行动画处理。
LayoutGroup 用于对可能不会一起渲染但会相互影响状态的组件进行分组。
用法
以这些各自处理自身状态的折叠面板项为例
function Item({ header, content }) { const [isOpen, setIsOpen] = useState(false) return ( <motion.div layout onClick={() => setIsOpen(!isOpen)} > <motion.h2 layout>{header}</motion.h2> {isOpen ? content : null} </motion.div> ) }
如果我们将这些并排放置在 Accordion 中，当它们的状态更新时，它们的兄弟组件无法得知
function Accordion() { return ( <> <ToggleContent /> <ToggleContent /> </> ) }
可以通过使用 LayoutGroup 对两个组件进行分组来解决此问题
import { LayoutGroup } from "motion/react" function Accordion() { return ( <LayoutGroup> <ToggleContent /> <ToggleContent /> </LayoutGroup> ) }
命名空间 layoutId
期望执行共享布局动画的组件会获得一个 layoutId 属性。
在以下示例中，每个 Tab 渲染一个带有 layoutId="underline" 属性的元素。
function Tab({ label, isSelected }) { return ( <li> {label} {isSelected ? <motion.div layoutId="underline" /> : null} </li> ) } function TabRow({ items }) { return items.map(item => <Tab {...item} />) }
layoutId 在您的站点中是全局的。因此，为了渲染多个 TabRow，我们希望使用 LayoutGroup 和 id 属性将它们分组
function TabRow({ id, items }) { return ( <LayoutGroup id={id}> {items.map(item => <Tab {...item} />)} </LayoutGroup> }
带有 layout 属性的 motion 组件将在每次提交 React 重新渲染或其 layoutDependency 属性更改时检测布局更改并进行动画处理。
LayoutGroup 用于对可能不会一起渲染但会相互影响状态的组件进行分组。
用法
以这些各自处理自身状态的折叠面板项为例
function Item({ header, content }) { const [isOpen, setIsOpen] = useState(false) return ( <motion.div layout onClick={() => setIsOpen(!isOpen)} > <motion.h2 layout>{header}</motion.h2> {isOpen ? content : null} </motion.div> ) }
如果我们将这些并排放置在 Accordion 中，当它们的状态更新时，它们的兄弟组件无法得知
function Accordion() { return ( <> <ToggleContent /> <ToggleContent /> </> ) }
可以通过使用 LayoutGroup 对两个组件进行分组来解决此问题
import { LayoutGroup } from "motion/react" function Accordion() { return ( <LayoutGroup> <ToggleContent /> <ToggleContent /> </LayoutGroup> ) }
命名空间 layoutId
期望执行共享布局动画的组件会获得一个 layoutId 属性。
在以下示例中，每个 Tab 渲染一个带有 layoutId="underline" 属性的元素。
function Tab({ label, isSelected }) { return ( <li> {label} {isSelected ? <motion.div layoutId="underline" /> : null} </li> ) } function TabRow({ items }) { return items.map(item => <Tab {...item} />) }
layoutId 在您的站点中是全局的。因此，为了渲染多个 TabRow，我们希望使用 LayoutGroup 和 id 属性将它们分组
function TabRow({ id, items }) { return ( <LayoutGroup id={id}> {items.map(item => <Tab {...item} />)} </LayoutGroup> }
带有 layout 属性的 motion 组件将在每次提交 React 重新渲染或其 layoutDependency 属性更改时检测布局更改并进行动画处理。
LayoutGroup 用于对可能不会一起渲染但会相互影响状态的组件进行分组。
用法
以这些各自处理自身状态的折叠面板项为例
function Item({ header, content }) { const [isOpen, setIsOpen] = useState(false) return ( <motion.div layout onClick={() => setIsOpen(!isOpen)} > <motion.h2 layout>{header}</motion.h2> {isOpen ? content : null} </motion.div> ) }
如果我们将这些并排放置在 Accordion 中，当它们的状态更新时，它们的兄弟组件无法得知
function Accordion() { return ( <> <ToggleContent /> <ToggleContent /> </> ) }
可以通过使用 LayoutGroup 对两个组件进行分组来解决此问题
import { LayoutGroup } from "motion/react" function Accordion() { return ( <LayoutGroup> <ToggleContent /> <ToggleContent /> </LayoutGroup> ) }
命名空间 layoutId
期望执行共享布局动画的组件会获得一个 layoutId 属性。
在以下示例中，每个 Tab 渲染一个带有 layoutId="underline" 属性的元素。
function Tab({ label, isSelected }) { return ( <li> {label} {isSelected ? <motion.div layoutId="underline" /> : null} </li> ) } function TabRow({ items }) { return items.map(item => <Tab {...item} />) }
layoutId 在您的站点中是全局的。因此，为了渲染多个 TabRow，我们希望使用 LayoutGroup 和 id 属性将它们分组
function TabRow({ id, items }) { return ( <LayoutGroup id={id}> {items.map(item => <Tab {...item} />)} </LayoutGroup> }
