UFUse（1.6.2）

Appearance

On this page

useElementsAfterMount ​

useElementsAfterMount 可以收集一些 DOM 节点，等到组件挂载后对这些再执行一些操作。

在组件挂载时需要对一些元素做入场动画时候这很有用，这样就避免需要声明很多 ref 来获取这些元素。

预览 ​

2023 | 08 | 18

使用 ​

vue
<script setup lang="ts">
import useElementsAfterMount from 'ufuse/src/hooks/useElementsAfterMount'
import gsap from 'gsap'

const { collect } = useElementsAfterMount<HTMLElement>((elements) => {
  gsap.fromTo(
    elements,
    { opacity: 0, x: 30 },
    { opacity: 1, x: 0, stagger: 0.2, duration: 1 },
  )
})
</script>

<template>
  <div class="demo">
    <div class="flex items-center">
      <span :ref="collect">2023</span>
      <span :ref="collect">&nbsp;|&nbsp;</span>
      <span :ref="collect">08</span>
      <span :ref="collect">&nbsp;|&nbsp;</span>
      <span :ref="collect">18</span>
    </div>
  </div>
</template>

贡献者 ​

cuijin
xieyuhang