Motion Vue

useInView

useInView 是一个自定义钩子，用于监控 DOM 元素的可见性，并返回一个响应式的布尔值。此值表示元素当前是否在视口中。

使用

useInView 跟踪 DOM 元素的可见性。将 DOM 元素的引用传递给钩子。

<script setup>
import { useInView } from 'motion-v'

const scope = ref(null)
const isInView = useInView(scope)
</script>

<template>
  <div
    ref="scope"
    class="bg-primary p-4 rounded w-20 h-20"
  />
</template>

当元素在视口中时，isInView.value 将为 true。当元素不在视口中时，isInView.value 将为 false。

选项

useInView 接受一个选项对象作为第二个参数。

它具有以下属性：

  • once：布尔值。如果设置为true，isInView将只触发一次，不会对可见性的后续更改做出响应。

默认: False.

const isInView = useInView(scope, {
  once: true,
})
  • root：HTMLElement。检查可见性的根元素。

默认: 窗口.

const isInView = useInView(scope, {
  root: document.getElementById('app'),
})
  • margin：字符串。根元素的边距。

默认：0px。

const isInView = useInView(scope, {
  margin: '100px',
})
  • amount：'some' | 'all' | 0-1。应进入视口的元素的数量，被视为在视图中。

默认: some.

const isInView = useInView(scope, {
  amount: 'all',
})
useAnimate
useAnimationFrame