组件

vueuse/motion 允许您直接在组件的模板中实现动画，而无需将目标元素包裹在任何额外的组件中。

这些组件的工作方式类似于指令 v-motion 的用法，但在使用服务端渲染的项目中效果更好。

<Motion>

在 <p> 元素上使用 motion 预设的 <Motion> 组件示例

<template>
  <Motion is="p" preset="slideVisibleLeft">Text in Motion!</Motion>
</template>
向下滚动以触发 motion！

Motion 中的文本！

<MotionGroup>

<MotionGroup> 可用于将其 motion 配置应用于所有子元素，此组件默认无渲染，可以通过将值传递给 :is prop 来用作包装器。

<template>
  <MotionGroup preset="slideVisibleLeft" :duration="600">
    <section>
      <h3>Product 1</h3>
      <p>Description text</p>
    </section>
    <section>
      <h3>Product 2</h3>
      <p>Description text</p>
    </section>
    <section>
      <h3>Product 3</h3>
      <p>Description text</p>
    </section>
  </MotionGroup>
</template>
向下滚动以触发 motion！

产品 1

描述文本

产品 2

描述文本

产品 3

描述文本

Props

<Motion> 和 <MotionGroup> 组件允许您将动画属性（变体）定义为 props。

  • is：应该渲染什么元素（<Motion> 默认使用 div）。
  • preset：要使用的 Motion 预设（期望使用驼峰式字符串），请参阅预设。

变体 props

  • initial：元素在挂载前将拥有的属性。
  • enter：元素在挂载后将拥有的属性。
  • visible：元素在视图中时将拥有的属性。一旦离开视图，将重新应用 initial 属性。
  • visible-once：元素进入视图后将拥有一次的属性。
  • hovered：元素悬停时将拥有的属性。
  • focused：元素获得焦点时将拥有的属性。
  • tapped：元素被点击或触摸时将拥有的属性。

变体可以作为对象使用 :variants prop 传递。

:variants prop 与其他变体属性结合使用，允许从此对象定义自定义变体。

可以在变体页面上探索其他变体属性。

简写 Props

我们支持简写 props 以快速设置过渡属性

  • delay
  • duration

这些属性适用于 visible、visible-once 或 enter 变体（如果指定）；否则，它们默认为 initial 变体。

<template>
  <Motion
    :initial="{ opacity: 0, y: 100 }"
    :enter="{ opacity: 1, y: 0, scale: 1 }"
    :variants="{ custom: { scale: 2 } }"
    :hovered="{ scale: 1.2 }"
    :delay="200"
    :duration="1200"
  >
    Content to animate!
  </Motion>
</template>
目录