vue3 获取同名ref 元素

Question

更多同名ref

我想在页面滚动时给同名ref为animate的元素添加动画，在onmouted后只能获取最后一个ref位animate的元素，怎么可以获取更多ref同名元素？
我知道for循环可以，但我现在是静态页面，不需要for循环

Answer 1

参考免费微信小程序：皆我百晓生 作答，经由专家-皆知整理回复，如问题解决，望采纳；如仍有疑问，请评论回复。

在Vue 3中，如果你需要获取页面内所有具有相同ref的元素，并在页面滚动时对它们添加动画，你可以使用ref数组来实现这一点。

首先，你需要将具有相同ref名称的元素定义为一个数组，然后在onMounted生命周期钩子中使用refs函数来获取所有这些元素的引用。接着，你可以监听滚动事件，并在这些元素进入视口时触发动画。

以下是实现这一功能的示例代码：

<template>
  <div ref="animateRefs" class="container">
    <!-- 假设你的元素是这样的 -->
    <div class="animate-item">内容1</div>
    <div class="animate-item">内容2</div>
    <div class="animate-item">内容3</div>
    <!-- 其他内容 -->
  </div>
</template>

<script>
import { ref, onMounted, watchEffect } from 'vue';

export default {
  setup() {
    // 创建一个ref数组来存储所有animate元素的引用
    const animateRefs = ref([]);

    // 定义一个方法来获取所有具有ref="animate"的元素
    function getAnimateRefs() {
      const elements = document.querySelectorAll('.animate-item');
      animateRefs.value = Array.from(elements);
    }

    // 在组件挂载后调用getAnimateRefs方法
    onMounted(() => {
      getAnimateRefs();
      // 监听滚动事件
      window.addEventListener('scroll', () => {
        animateRefs.value.forEach((ref, index) => {
          if (isInViewport(ref)) {
            // 触发动画
            ref.classList.add('animate');
          }
        });
      });
    });

    // 检查元素是否在视口中
    function isInViewport(el) {
      const rect = el.getBoundingClientRect();
      return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
      );
    }

    return {
      animateRefs
    };
  }
};
</script>

<style>
/* 定义你的动画样式 */
.animate {
  /* 动画样式 */
  animation: yourAnimation 1s ease-in-out;
}
</style>

在这个示例中，getAnimateRefs函数将获取页面上所有class为animate-item的元素，并使用Array.from将它们转换为数组，存储在animateRefs中。然后，我们监听滚动事件，并使用isInViewport函数检查每个元素是否在视口中，如果是，就为其添加动画类animate。

请确保你已经定义了yourAnimation动画样式，以便在元素进入视口时触发动画效果。