变体
变体代表元素的动画状态。
<div
v-motion
:initial="{
opacity: 0,
y: 100,
}"
:enter="{
opacity: 1,
y: 0,
transition: {
type: 'spring',
stiffness: '100',
delay: 100,
},
}"
/>
此元素将在 100 毫秒后平滑淡入。 ☝️
初始变体
初始变体代表焦点元素的基础状态。
它与 结合使用，并在元素创建时应用。
建议为每个您希望使用后续变体进行动画处理的参数包含一个基础状态。
<div
v-motion
:initial="{
opacity: 0,
y: 100,
}"
/>
此元素将被隐藏，并在其原始位置下方 100 像素。 ☝️
生命周期变体
进入
进入变体将在元素创建后的第二个 tick 应用，紧随其后。
您可以使用它在元素出现时触发动画，从 初始 变体过渡。
<div
v-motion
:initial="{
opacity: 0,
y: 100,
}"
:enter="{
opacity: 1,
y: 0,
}"
/>
此元素将在页面加载时平滑淡入。 ☝️
离开
离开变体有助于定义元素在应该离开 DOM 时的状态。
<div
v-motion
:initial="{
opacity: 0,
y: 100,
}"
:enter="{
opacity: 1,
y: 0,
}"
:leave="{
y: -100,
opacity: 0,
}"
/>
为了实现离开过渡，您将需要访问 Motion 实例。
此实例公开了一个名为 leave 的辅助方法，可以轻松地与 Vue transition 元素的 @leave 事件映射。
您可以在 Demo 页面上的“Transitions”部分查看实现示例。
可见性变体
可见
当元素进入视口时，将应用可见变体。
当元素离开时，将再次应用 初始 变体。
<div
v-motion
:initial="{
opacity: 0,
y: 100,
}"
:visible="{
opacity: 1,
y: 0,
}"
/>
此元素每次进入视口时都会平滑淡入。 ☝️
可见一次
与可见变体不同，此变体仅触发一次。
<div
v-motion
:initial="{
opacity: 0,
y: 100,
}"
:visibleOnce="{
opacity: 1,
y: 0,
}"
/>
事件变体
变体还可以用于通过事件监听器与元素交互。
只有在您指定这些变体时，才会注册这些事件监听器。
请注意，这些变体不会替换元素的当前变体，而只会在事件处于活动状态时更改它。
将通过组合所有活动的变体来生成元变体，使用以下顺序
- 悬停 (最低优先级)
- 聚焦
- 点击 (最高优先级)
这样做可以在这些状态之间实现更平滑的过渡，并允许您在元素动画化时与其交互。
悬停
一个常规的悬停事件监听器，它在移动设备上不起作用。
<div
v-motion
:initial="{
scale: 1,
}"
:visible="{
scale: 1,
}"
:hovered="{
scale: 1.2,
}"
/>
此元素将在悬停时放大。 ☝️
聚焦
一个常规的聚焦事件监听器。
<div
v-motion
:initial="{
scale: 1,
}"
:visible="{
scale: 1,
}"
:focused="{
scale: 1.1,
}"
/>
此元素将在聚焦时放大。 ☝️
点击
一个无缝结合鼠标和触摸事件的事件监听器。
它将根据用户支持的指针事件在它们之间切换。
<div
v-motion
:initial="{
scale: 1,
}"
:hovered="{
scale: 1,
}"
:tapped="{
scale: 0.8,
}"
/>
此元素将在点击时缩小。 ☝️
自定义变体
您可以创建自己的变体并使用 motion 实例应用它们。
<template>
<div v-motion="'customElement'" :initial="{ scale: 1, }" :variants="{ custom:
{ scale: 2, transition: { type: "spring", stiffness: 100 } } }" />
</template>
<script setup>
import { useMotions } from '@vueuse/motion'
// Access the motion instance using useMotions.
const { customElement } = useMotions()
// Dummy custom event function
const yourCustomEvent = () => {
// Edit the variant using the motion instance.
customElement.variant.value = 'custom'
}
</script>