Motion Vue

Motion

组件 Motion 是 Motion for Vue 中动画的主要构建块。它可以通过使用 as prop 被渲染为任何 HTML 或 SVG 元素，例如 <Motion as="div"/> 或 <Motion as="circle"/>。或者，您可以将 asChild 传递以直接渲染子组件。

导入

import { Motion } from 'motion-v'

  <Motion
    as="div"
    class="w-10 h-10 bg-primary rounded-lg"
    :initial="{
      opacity:0
    }"
    :animate="{
      opacity:1
    }"
  />

基本用法

关键帧

设置一个值作为数组，Motion 将依次通过这些值进行动画。

默认情况下，每个关键帧将在动画中均匀分布，但精确的时机和缓动可以通过过渡属性进行配置。

变体

变体是组件可以处于的预定义视觉状态。通过为组件及其子组件 变体 提供匹配的名称，可以通过更改单个属性来动画化整个 Vue 树。

手势动画

运动提供 hover、press 辅助属性，在手势活动时临时将组件动画到一个视觉状态。

类似于animate，这些可以设置为属性对象（每个都有自己的过渡属性），或者变体的名称。

命名空间

运动为每个 HTML 和 SVG 元素提供了一个命名空间，类似于 motion/react。这允许您直接使用元素，无需使用as属性：

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

<template>
  <motion.div
    :initial="{ opacity: 0 }"
    :animate="{ opacity: 1 }"
  />
</template>

对于组件，您还可以使用motion.create来创建任何自定义组件的运动组件：

<script setup lang="ts">
import { motion } from 'motion-v'
import Component from './Component.vue'

const MotionComponent = motion.create(Component)
</script>

<template>
  <MotionComponent
    :initial="{ opacity: 0 }"
    :animate="{ opacity: 1 }"
  />
</template>

InView

设置组件在进入视口时动画的 inView 属性。

属性

初始化

初始的 Motion 组件的视觉状态。

这可以设置为动画目标：

<Motion
  :initial="{
    opacity:0,x:0
  }"
/>

或设置字符串以定位变体：

<Motion
  initial="variantName"
  :variants="{
    variantName: {
      opacity:0,x:0
    }
  }"
/>

或设置 false 以禁用初始动画：

<Motion
  :initial="false"
/>

animate

the animate 属性用于设置动画目标。当组件挂载或 animate 属性更新时，它将动画到 animate 目标。

<Motion
  :animate="{
    opacity:1,x:100
  }"
/>

或设置字符串以定位变体：

<Motion
  animate="variantName"
  :variants="{
    variantName: {
      opacity:1,x:100
    }
  }"
/>

custom

The custom prop is used to pass through to dynamic variants.

transition

动画中使用 transition 属性来设置过渡效果。

<Motion
  :initial="{ x: 0, opacity: 0 }"
  :animate="{ x: 100, opacity: 1 }"
  :transition="{
    duration: 1,
    x: { type: 'spring', stiffness: 260, damping: 20 },
  }"
/>

inViewOptions

The inViewOptions 属性用于设置 inView 属性的选项。

<Motion
  :in-view-options="{
    once: true,
  }"
/>

margin

默认: 0

The margin option allows you to set the margin around the component that should be in view for the animation to trigger.

<Motion
  :in-view="{ x: 0 }"
  :in-view-options="{ margin: 100 }"
/>

once

默认: False

The once 选项允许您设置组件进入视口时动画只触发一次。

<Motion
  :in-view="{ x: 0 }"
  :in-view-options="{ once: true }"
/>

root

The root 选项允许您设置 inView 动画应相对于的根元素。

<Motion
  :in-view="{ x: 0 }"
  :in-view-options="{ root: '#root' }"
/>

数量

默认: some

The amount 选项允许您设置应显示在动画触发时的组件的 amount 数量。

您可以将数量设置为全部，这意味着当整个组件在视图中时，动画将触发。

或者您可以设置一个数字，这意味着当组件通过数量的组件在视图中时，动画将触发。

<Motion
  :in-view="{ x: 0 }"
  :in-view-options="{ amount: 'all' }"
/>

as

The as 属性允许您设置 Motion 组件应该渲染为的 HTML 或 SVG 元素。

<Motion
  as="div"
  class="w-10 h-10 bg-primary rounded-lg"
/>

作为子元素

The asChild 属性允许您直接渲染子组件。

<Motion
  as-child
>
  <ChildComponent />
</Motion>
Installation
如何安装 motion-v 到你的应用.
Animate Presence
Animate components when they're removed from the Vue tree.