Vue3无库实现滚动动画失效问题求助

问题描述 #

我找到一份无需依赖库实现网页滚动动画的Vue2教程，将其适配为Vue3代码后，动画完全没有效果。以下是我编写的代码：

main.js #

import ScrollAnimation from './js/scrollanimation';

createApp(App)
.directive('scrollanimation', ScrollAnimation)

js/scrollanimation.js #

const animatedScrollObserver = new IntersectionObserver(
    (entries, animatedScrollObserver) => {
  
      entries.forEach((entry) => {

        if(entry.isIntersecting) {
          entry.target.classList.add('enter');
          animatedScrollObserver.unobserve(entry.target);
        }
      });
    }
  );
  

  export default {
    bind(el) {
      el.classList.add('before-enter');
      animatedScrollObserver.observe(el);
    }
  }

Home.vue #

<template>
  <header class="w-full h-full flex-wrap md:flex-nowrap flex items-center justify-center pt-32 mb-24 lg:pb-28 lg:mb-48 bg-aere bg-no-repeat bg-contain">
    <div class="w-4/5 md:w-1/2 xl:w-2/5 m-8 md:pr-10 flex justify-center"> 
      <div>
        <h1 class="text-center md:text-left font-strait text-2xl sm:text-3xl lg:text-4xl 2xl:text-5xl pb-4">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1>
        <p class="text-center md:text-left font-opensans text-base 2xl:text-xl font-light">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
    <div v-scrollanimation class="w-full md:w-1/2 xl:w-3/5">
      <img src="../assets/header-home.jpg" class="w-full rounded-bl-3xl" alt="">
    </div>
  </header>
</template>

<style>
.before-enter {
  opacity: 0;
  transform: translateX(100px);
  transition: all 1s cubic-bezier(.41,.01,.57,1.61);
}
.enter {
  opacity: 1;
  transform: translateX(0px);
}
</style>

失效原因分析 #

1. Vue3 自定义指令钩子变更：Vue2中的bind钩子在Vue3中已被移除，对应DOM挂载后触发的钩子是mounted。原代码使用bind不会被Vue3识别，导致before-enter类从未添加，动画初始状态不生效。
2. CSS样式优先级问题：如果父元素或全局样式的优先级高于.before-enter和.enter，会覆盖动画样式，导致看不到效果。
3. IntersectionObserver触发时机问题：默认配置下元素刚进入视口边缘就触发，但如果元素初始就在视口内，可能因DOM未完全渲染导致类添加时机不对。

解决方案 #

1. 修改自定义指令钩子 #

将scrollanimation.js中的bind替换为Vue3支持的mounted钩子：

const animatedScrollObserver = new IntersectionObserver(
  (entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('enter');
        observer.unobserve(entry.target);
      }
    });
  },
  // 可选：添加阈值配置，确保元素进入视口一定比例后触发
  { threshold: 0.1 }
);

export default {
  mounted(el) { // 替换bind为mounted
    el.classList.add('before-enter');
    animatedScrollObserver.observe(el);
  }
};

2. 提升CSS样式优先级 #

修改Home.vue中的样式，给动画类加上更明确的选择器，避免被其他样式覆盖：

/* 绑定指令的元素本身作为前缀，提升优先级 */
div[v-scrollanimation].before-enter {
  opacity: 0;
  transform: translateX(100px);
  transition: all 1s cubic-bezier(.41,.01,.57,1.61);
}
div[v-scrollanimation].enter {
  opacity: 1;
  transform: translateX(0);
}

3. 处理初始视口内的元素 #

如果目标元素页面加载时就处于视口内，可在mounted钩子中手动检查元素可见性，强制触发动画：

export default {
  mounted(el) {
    el.classList.add('before-enter');
    // 手动检查元素是否在视口内
    const rect = el.getBoundingClientRect();
    const isVisible = rect.top < window.innerHeight && rect.bottom > 0;
    if (isVisible) {
      el.classList.add('enter');
    } else {
      animatedScrollObserver.observe(el);
    }
  }
};

内容的提问来源于stack exchange，提问作者Crysanthes