文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

文档

JS

React

Vue

示例

入门

动画

组件

Motion 值

Hook

集成

JS

React

Vue

示例

入门

动画

组件

Motion 值

Hook

集成

Vue

useInView

useInView

useInView 是一个微小的 (0.6kb) Hook，用于检测提供的元素何时在视口内。它可以与任何 Vue 元素一起使用。

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

const domRef = ref()
const isInView = useInView(domRef)
</script>

<template>
  <div ref="domRef" />
</template>

用法

从 Motion 导入 useInView

import { useInView } from "motion-v"

useInView 可以跟踪任何 HTML 元素的可见性。将 ref 对象传递给 useInView 和 HTML 元素。

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

const domRef = ref()
const isInView = useInView(ref)
</script>

<template>
  <div ref="domRef" />
</template>

当元素在视口外时，useInView 将返回 false。当它移动到视口内时，它将重新渲染组件并返回 true。

效果

useInView 是原生的 Vue ref 状态，因此在 isInView 更改时触发函数只需将其传递给 watch 即可。

<script setup>
watch(isInView, (inView) => {
  console.log('Element is in view: ', inView)
})
</script>

选项

useInView 可以接受选项来定义如何在视口内跟踪元素。

const isInView = useInView(domRef, { once: true })

root

默认情况下，useInView 将跟踪元素进入/离开窗口视口时的可见性。将 root 设置为可滚动父元素的 ref，它将使用该元素作为视口。

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

const container = ref()
const boxRef = ref()
const isInView = useInView(boxRef,computed(() => ({ root: container.value })))
</script>

<template>
  <div ref="container" style="overflow: scroll">
    <div ref="boxRef" />
  </div>
</template>

margin

默认值："0px"

添加到视口的 margin 以更改检测区域。使用多个值来调整上/右/下/左，例如 "0px -20px 0px 100px"。

const isInView = useInView({
  margin: "0px 100px -50px 0px"
})

]注意： 出于浏览器安全原因，margin在跨域 iframe 中不起作用除非显式定义了 root。

once

默认值：false

如果为 true，一旦元素进入视图，useInView 将停止观察该元素并始终返回 true。

const isInView = useInView(ref, { once: true })

initial

默认值：false

设置一个初始值，直到元素被测量后才返回。

const isInView = useInView(ref, { initial: true })

amount

默认值： "some"

应进入视口以被视为“已进入”的元素量。可以是 "some"、"all" 或介于 0 和 1 之间的数字。

示例

useInView 是一个微小的 (0.6kb) Hook，用于检测提供的元素何时在视口内。它可以与任何 Vue 元素一起使用。

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

const domRef = ref()
const isInView = useInView(domRef)
</script>

<template>
  <div ref="domRef" />
</template>

用法

从 Motion 导入 useInView

import { useInView } from "motion-v"

useInView 可以跟踪任何 HTML 元素的可见性。将 ref 对象传递给 useInView 和 HTML 元素。

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

const domRef = ref()
const isInView = useInView(ref)
</script>

<template>
  <div ref="domRef" />
</template>

当元素在视口外时，useInView 将返回 false。当它移动到视口内时，它将重新渲染组件并返回 true。

效果

useInView 是原生的 Vue ref 状态，因此在 isInView 更改时触发函数只需将其传递给 watch 即可。

<script setup>
watch(isInView, (inView) => {
  console.log('Element is in view: ', inView)
})
</script>

选项

useInView 可以接受选项来定义如何在视口内跟踪元素。

const isInView = useInView(domRef, { once: true })

root

默认情况下，useInView 将跟踪元素进入/离开窗口视口时的可见性。将 root 设置为可滚动父元素的 ref，它将使用该元素作为视口。

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

const container = ref()
const boxRef = ref()
const isInView = useInView(boxRef,computed(() => ({ root: container.value })))
</script>

<template>
  <div ref="container" style="overflow: scroll">
    <div ref="boxRef" />
  </div>
</template>

margin

默认值："0px"

添加到视口的 margin 以更改检测区域。使用多个值来调整上/右/下/左，例如 "0px -20px 0px 100px"。

const isInView = useInView({
  margin: "0px 100px -50px 0px"
})

]注意： 出于浏览器安全原因，margin在跨域 iframe 中不起作用除非显式定义了 root。

once

默认值：false

如果为 true，一旦元素进入视图，useInView 将停止观察该元素并始终返回 true。

const isInView = useInView(ref, { once: true })

initial

默认值：false

设置一个初始值，直到元素被测量后才返回。

const isInView = useInView(ref, { initial: true })

amount

默认值： "some"

应进入视口以被视为“已进入”的元素量。可以是 "some"、"all" 或介于 0 和 1 之间的数字。

示例

useInView 是一个微小的 (0.6kb) Hook，用于检测提供的元素何时在视口内。它可以与任何 Vue 元素一起使用。

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

const domRef = ref()
const isInView = useInView(domRef)
</script>

<template>
  <div ref="domRef" />
</template>

用法

从 Motion 导入 useInView

import { useInView } from "motion-v"

useInView 可以跟踪任何 HTML 元素的可见性。将 ref 对象传递给 useInView 和 HTML 元素。

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

const domRef = ref()
const isInView = useInView(ref)
</script>

<template>
  <div ref="domRef" />
</template>

当元素在视口外时，useInView 将返回 false。当它移动到视口内时，它将重新渲染组件并返回 true。

效果

useInView 是原生的 Vue ref 状态，因此在 isInView 更改时触发函数只需将其传递给 watch 即可。

<script setup>
watch(isInView, (inView) => {
  console.log('Element is in view: ', inView)
})
</script>

选项

useInView 可以接受选项来定义如何在视口内跟踪元素。

const isInView = useInView(domRef, { once: true })

root

默认情况下，useInView 将跟踪元素进入/离开窗口视口时的可见性。将 root 设置为可滚动父元素的 ref，它将使用该元素作为视口。

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

const container = ref()
const boxRef = ref()
const isInView = useInView(boxRef,computed(() => ({ root: container.value })))
</script>

<template>
  <div ref="container" style="overflow: scroll">
    <div ref="boxRef" />
  </div>
</template>

margin

默认值："0px"

添加到视口的 margin 以更改检测区域。使用多个值来调整上/右/下/左，例如 "0px -20px 0px 100px"。

const isInView = useInView({
  margin: "0px 100px -50px 0px"
})

]注意： 出于浏览器安全原因，margin在跨域 iframe 中不起作用除非显式定义了 root。

once

默认值：false

如果为 true，一旦元素进入视图，useInView 将停止观察该元素并始终返回 true。

const isInView = useInView(ref, { once: true })

initial

默认值：false

设置一个初始值，直到元素被测量后才返回。

const isInView = useInView(ref, { initial: true })

amount

默认值： "some"

应进入视口以被视为“已进入”的元素量。可以是 "some"、"all" 或介于 0 和 1 之间的数字。

示例

useDragControls

useReducedMotion

保持关注

订阅以获取最新新闻和更新。

©2025 Motion Division Ltd.
网站

关于

博客

文档

示例

Motion+

赞助

社交

Discord

GitHub

X/Twitter

Bluesky

保持关注

订阅以获取最新新闻和更新。

©2025 Motion Division Ltd.
网站

关于

博客

文档

示例

Motion+

赞助

社交

Discord

GitHub

X/Twitter

Bluesky