组合式用法

vueuse/motion 使用 Composition API 编写。

此包的组合式用法允许你从组件的 setup 钩子中创建动画。

你的第一个 useMotion

useMotion 是此包的核心组合式函数。

它是一个接受三个参数的函数。

第一个参数是 target。

target 可以是 HTML 或 SVG 元素，或这些类型的引用。

第二个参数是 variants。

变体定义在一个特定的页面中描述。

<script setup>
import { useMotion } from '@vueuse/motion'

const target = ref<HTMLElement>()

const motionInstance = useMotion(target, {
    initial: {
        opacity: 0,
        y: 100
    },
    enter: {
        opacity: 1,
        y: 0
    }
})
</script>

一旦调用，useMotion 组合式函数将返回一个 Motion 实例的实例。

通过使用此 motion 实例成员，你将能够轻松地为元素添加动画。