布局动画

Motion 行业领先的布局动画使在任意两个布局之间（甚至在不同元素之间）进行动画变得容易。

它就像 layout 属性一样简单。

<motion.div layout />

这个小小的属性可以为以前无法制作动画的 CSS 值制作动画，例如在 flex-start 和 flex-end 之间切换 justify-content。

<motion.div
  layout
  :style="{ justifyContent: isOn ? 'flex-start' : 'flex-end' }"
/>

或者通过使用 layoutId 属性，可以匹配两个元素并在它们之间制作动画，以实现一些真正高级的动画。

<motion.li layoutId="item" />

它可以处理从微交互到整页过渡的任何事情。

用法

任何由于 Vue 重新渲染而发生的布局更改都可以进行动画处理。

<motion.div layout :style="{ width: isOpen ? '80vw' : 0 }" />

请注意，CSS 更改应通过 style 立即发生，而不是 animate，因为 layout 将负责动画。

布局更改可以是任何内容，更改 width/height、网格列数、重新排序列表或添加/删除新项目

共享布局动画

当添加一个具有 layoutId 属性的新组件，且该属性与现有组件匹配时，它将自动从旧组件动画移出。

<motion.div v-if="isSelected" layoutId="underline" />

如果旧组件在新组件进入时仍然挂载，它们将自动从旧组件交叉淡入到新组件。

当删除一个元素以动画返回其原始布局时，可以使用 AnimatePresence 将其保留在 DOM 中，直到其退出动画完成。

<AnimatePresence>
  <motion.div v-if="isOpen" layoutId="modal" />
</AnimatePresence>

设置过渡

布局动画可以使用以下方式自定义the过渡属性属性.

<motion.div layout :transition="{ duration: 0.3 }" />

如果您想专门为仅布局动画设置过渡，则可以指定特定的 layout 过渡。

<motion.div
  layout
  :animate="{ opacity: 0.5 }"
  :transition="{
    default: { ease: 'linear' },
    layout: { duration: 0.3 }
  }"
/>

当执行共享布局动画时，将使用为我们动画到的元素定义的过渡。

  <motion.button
    layoutId="modal"
    @click="() => isOn=true"
    // This transition will be used when the modal closes
    :transition="{ type: 'spring' }"
  >
    Open
  </motion.button>
  <AnimatePresence>
      <motion.dialog
        v-if="isOn"
        layoutId="modal"
        // This transition will be used when the modal opens
        :transition="{ duration: 0.3 }"
      />
  </AnimatePresence>

在可滚动元素内制作动画

为了在可滚动元素内正确地制作布局动画，我们需要为它们提供 layoutScroll 属性。

<motion.div layoutScroll :style="{ overflow: 'scroll' }" />

这使 Motion 在测量子元素时能够考虑元素的滚动偏移量。

在固定容器内制作动画

为了在固定元素内正确地制作布局动画，我们需要为它们提供 layoutRoot 属性。

<motion.div layoutRoot :style="{ position: 'fixed' }" />

这使 Motion 在测量子元素时能够考虑页面的滚动偏移量。

分组布局动画

当组件重新渲染且其布局已更改时，会触发布局动画。

<script setup>
  const open = ref(false)
</script>

<template>  
    <motion.div
      layout
      :style="{ height: isOpen ? "100px" : "500px" }"
      @click="() => open=!open"
    />
</template>

但是，当我们有两个或多个组件不同时重新渲染，但确实相互影响布局时，会发生什么情况？

<template>
    <Accordion />
    <Accordion />
</template>

当一个组件重新渲染时，出于性能原因，另一个组件将无法检测到其布局的变化。

我们可以通过将多个组件包装在 LayoutGroup 组件 中来同步跨多个组件的布局更改。

<script setup>
import { LayoutGroup } from "motion-v"
</script>

<template>
    <LayoutGroup>
      <Accordion />
      <Accordion />
    </LayoutGroup>  
</template>

当在任何分组的 motion 组件中检测到布局更改时，布局动画将在所有这些组件中触发。

缩放校正

所有布局动画都使用 transform 样式执行，从而实现流畅的帧速率。

使用 transform 制作布局动画有时会在视觉上扭曲子元素。为了纠正这种扭曲，元素的第一个子元素也可以被赋予 layout 属性。

打开此沙箱并尝试从粉红色圆点中删除 layout，以查看这将产生的差异

Transform 也可以扭曲 boxShadow 和 borderRadius。motion 组件将自动校正这两个属性上的这种扭曲，只要它们被设置为 motion 值。

如果您不为这些值制作动画，最简单的方法是通过 style 设置它们。

<motion.div layout :style="{ borderRadius: 20 }" />

故障排除

组件没有动画

确保组件未设置为 display: inline，因为浏览器不会将 transform 应用于这些元素。

确保当您期望布局动画开始时，组件正在重新渲染。

SVG 布局动画已损坏

当前的布局动画不支持 SVG 组件。SVG 没有布局系统，因此建议直接为其属性（如 cx 等）制作动画。

内容拉伸得不理想

这是使用 scale 为 width 和 height 制作动画的自然副作用。

通常，可以通过为这些元素提供 layout 动画来解决此问题，它们将得到缩放校正。

<motion.section layout>
  <motion.img layout />
</motion.section>

某些元素（例如在不同宽高比之间更改的图像或文本）可能更适合使用 layout="position" 进行动画处理。

边框半径或阴影表现异常

为 scale 制作动画性能很高，但可能会扭曲某些样式，例如 border-radius 和 box-shadow。

Motion 会自动校正这些属性上的缩放扭曲，但它们必须通过 style 设置在元素上。

<motion.div layout :style="{ borderRadius: '20px' }" />

边框在动画期间看起来被拉伸

具有 border 的元素在动画期间可能看起来被拉伸。这有两个原因

1. 因为更改 border 会触发布局重新计算，所以它会抵消通过 transform 制作动画的性能优势。您不妨经典地为 width 和 height 制作动画。

2. border 无法渲染小于 1px 的大小，这限制了 Motion 可以对此样式执行的缩放校正程度。

一种解决方法是用具有 padding 的父元素替换 border，该父元素充当 border。

<motion.div layout :style="{ borderRadius: '10px', padding: '5px' }">
  <motion.div layout "style="{ borderRadius: '5px' }" />
</motion.div>

技术阅读

对布局动画背后的技术细节感兴趣吗？Nanda 在以下方面做得非常出色解释挑战使用交互式示例，说明使用 transform 制作布局动画的挑战。Motion 的创建者 Matt 在Vercel 会议上发表了演讲介绍了基本是最新的实现细节。

与 View Transitions API 的区别

更多浏览器开始支持View Transitions API，它类似于 Motion 的布局动画。

View Transitions API 的优势

View Transitions 的两个主要优点是它包含在浏览器中并且具有独特的渲染系统。

文件大小

因为 View Transitions API 已经包含在浏览器中，所以实现非常简单的交叉淡入淡出动画非常便宜。

但是，CSS 的复杂性可能会快速扩展。Motion 的布局动画大约为 12kb，但从那里开始，更改过渡、添加弹簧、标记匹配非常便宜

渲染

虽然 Motion 会对页面上存在的元素进行动画处理，但 View Transitions API 做了一些非常独特的事情，即它拍摄了上一页状态的图像快照，并将其与新页面状态的实时视图进行交叉淡入淡出。

对于共享元素，它也执行相同的操作，拍摄小的图像快照，然后将这些快照与元素新状态的实时视图进行交叉淡入淡出。

这可以用来创建有趣的效果，例如全屏擦除，而这些效果实际上不在布局动画的范围内。Framer 的页面效果是使用 View Transitions API 构建的，并且它也广泛使用布局动画。为合适的工作选择合适的工具。

View Transitions API 的缺点

API 与布局动画相比，存在很多缺点

• 不可中断：在动画中途中断动画会将动画捕捉到结尾，然后再开始下一个动画。这感觉非常不稳定。

• 阻止交互：动画元素覆盖在下面的“真实”页面上，并阻止指针事件。使事情感觉非常粘滞。

• 难以管理 ID：布局动画允许使用多个具有 layoutId 的元素，而如果未删除上一个元素，View Transitions 将会崩溃。

• 性能较低： View Transitions 拍摄实际屏幕截图并通过 width/height 进行动画处理，而布局动画则通过 transform 进行动画处理。当为许多元素制作动画时，这在可衡量的程度上性能较低。

• 不考虑滚动：如果页面滚动在视图过渡期间发生变化，元素将错误地为此增量制作动画。

• 没有相对动画： 如果嵌套元素具有 delay，则当其父元素动画移开时，它将被“遗留”，而 Motion 可以处理这种相对动画。

• 一次一个动画：View Transitions 会对整个屏幕进行动画处理，这意味着将其与其他动画组合很困难，而其他视图动画则不可能。

总而言之，每个系统都提供不同的东西，并且每个系统都可能更适合您的需求。未来，Motion 也可能提供基于 View Transitions API 的 API。