手势

Motion 通过一套简单而强大的 UI 手势扩展了 Vue 的基本事件监听器集合。

motion 组件目前支持 hover、press、pan、drag 和 inView。

每个手势都有一组事件监听器和一个 while- 动画 prop。

动画 props

motion 组件提供多种手势动画 props：whileHover、whilePress、whileFocus、whileDrag 和 whileInView。 这些可以定义动画目标，以便在手势处于活动状态时临时动画到这些目标。

<motion.button
  :whileHover="{
    scale: 1.2,
    transition: { duration: 1 },
  }"
  :whilePress="{ scale: 0.9 }"
/>

所有 props 既可以设置为要动画到的值目标，也可以设置为通过 variants prop 定义的任何变体的名称。 变体将像往常一样向下传递给子组件。

<motion.button
  whilePress="press"
  whileHover="hover"
  :variants="buttonVariants"
>
  <svg>
    <motion.path :variants="iconVariants" />
  </svg>
</motion.button>

手势

悬停

悬停手势检测指针何时悬停在组件上方或离开组件。

它与 onMouseEnter 和 onMouseLeave 的不同之处在于，悬停保证仅由实际鼠标事件触发（而不是由触摸输入模拟的浏览器生成的鼠标事件）。

<motion.a
  :whileHover="{ scale: 1.2 }"
  @hoverStart="event => {}"
  @hoverEnd="event => {}"

按下

按下手势检测主指针（如鼠标左键单击或第一个触摸点）在同一组件上按下并释放。

<motion.button :whilePress="{ scale: 0.9, rotate: 3 }" />

当点击或单击在它开始的同一组件上结束时，它将触发 press 事件；如果按下或单击在组件外部结束，则触发 pressCancel 事件。

如果可按压组件是可拖动组件的子组件，则如果指针在手势期间移动超过 3 像素，它将自动取消按下手势。

可访问性

带有按下事件的元素是键盘可访问的。

任何带有 press prop 的元素都将能够接收焦点，并且可以使用 Enter 键在聚焦元素上触发按下事件。

• 按下 Enter 键将触发 onPressStart 和 whilePress

• 释放 Enter 键将触发 onPress

• 如果元素在 Enter 键释放之前失去焦点，则会触发 onPressCancel。

平移

平移手势识别指针何时在组件上按下并移动超过 3 像素。 当指针释放时，平移手势结束。

<motion.div @pan="(e, pointInfo) => {}" />

平移目前没有相关的 while- prop。

注意： 为了使平移手势与触摸输入正确配合工作，需要使用 touch-action CSS 规则禁用元素在 x/y 轴或两个轴上的触摸滚动。

拖动

拖动手势将指针移动应用于组件的 x 和/或 y 轴。

<motion.div drag :whileDrag="{ scale: 1.2, backgroundColor: '#f00' }" />

默认情况下，当拖动结束时，元素将使用结束速度执行惯性动画。

可以通过将 dragMomentum 设置为 false 来禁用此功能，或者通过 dragTransition prop 进行更改。

约束

也可以设置 dragConstraints，可以将其设置为具有 top、left、right 和 bottom 值的对象，以像素为单位测量。

<motion.div
  drag="x"
  :dragConstraints="{ left: 0, right: 300 }"
/>

或者，它可以接受 HTMLElement ref 值。 您可以使用 motion-v 中的 useDomRef 获取组件的 DOM ref 值，并将其同时传递给可拖动组件的 dragConstraints prop 和您要用作约束的组件的 ref。

<script setup>
  import { useDomRef } from "motion-v"
  const constraintsRef = useDomRef()
</script>
<template>
  <motion.div ref="constraintsRef">
      <motion.div drag :dragConstraints="constraintsRef" />
  </motion.div>
</template>

默认情况下，将元素拖动到约束之外会产生一定的弹性。 可以通过将 dragElastic 设置为介于 0 和 1 之间的值来更改此行为，其中 0 等于无运动，1 等于约束之外的完全运动。

方向锁定

可以通过设置 dragDirectionLock 将元素锁定到它被拖动的第一个轴。

<motion.div
  drag
  dragDirectionLock
  @directionLock="callback"
/>

每次拖动手势开始时，都会检测到指针移动的方向，并且该元素将仅在此轴上可拖动。

焦点

焦点手势检测组件何时获得或失去焦点，其规则与CSS :focus-visible 选择器.

通常，这是指 input 通过任何方式接收焦点，以及其他元素通过可访问的方式（例如通过键盘导航）接收焦点时。

<motion.a :whileFocus="{ scale: 1.2 }" href="#" />

事件传播

子组件可以使用 Capture Vue props 阻止指针事件传播到父 motion 组件。

例如，子组件可以通过将 e.stopPropagation() 传递给 onPointerDownCapture 来阻止拖动和点击手势及其相关的 while 动画在父组件上触发。

<motion.div :whilePress="{ scale: 2 }">
  <button @pointerDownCapture="e => e.stopPropagation()" />
</motion.div>

注意：SVG 滤镜

手势在 SVG filter 组件上无法识别，因为这些元素没有物理存在，因此不接收事件。

您可以改为将 while- props 和事件处理程序添加到父组件，并使用变体来动画这些元素。

<template>
    <motion.svg whileHover="hover">
      <filter id="blur">
        <motion.feGaussianBlur
          :stdDeviation="0"
          :variants="{ hover: { stdDeviation: 2 } }"
        />
      </filter>
    </motion.svg>
</template>