Vueでページをスクロールしてきて要素が画面内に十分入ったときにふわっとフェードインさせたい

Question

実現したいこと

• Vueでページをスクロールしてきて要素が画面内に十分入ったときにふわっとフェードインさせたい。

発生している問題

画面内に入る前にフェードインアニメーションが行われてしまい、画面内に入ったときにはopacity: 1ですでに表示されてしまっている。

該当のソースコード

<template>
  <div>
    <br>
    <br>
    <br>
   //<br>省略

    <h1 class="fade-in-on-scroll">Hello World!</h1>
  </div>
</template>

<style>
.fade-in-on-scroll {
  opacity: 0;
  animation-name: fade-in-on-scroll;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}

.fade-in-on-scroll-active {
  opacity: 1;
}

@keyframes fade-in-on-scroll {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

<script lang="ts">
export default {
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    this.handleScroll();
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      const el = this.$el.querySelector(".fade-in-on-scroll");
      const elTop = el.getBoundingClientRect().top;
      const windowHeight = window.innerHeight;
      const yOffset = 100;
      if (elTop - windowHeight + yOffset <= 0) {
        el.classList.add("fade-in-on-scroll-active");
        window.removeEventListener("scroll", this.handleScroll);
      }
    }
  }
};
</script>

試したこと

Vueのtransitionなども試してみたのですが最近のWebサイトでよく見るスクロールエフェクトの「画面内に入ったときにふわっと表示させる」ことがうまくいかず、困っています。

補足情報（FW/ツールのバージョンなど）

vue　3.2.47

Answer 1

アニメーション関連の css を active 側に移すと良いと思います。

.fade-in-on-scroll {
  opacity: 0;
}

.fade-in-on-scroll-active {
  opacity: 1;
  animation-name: fade-in-on-scroll;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}

Comments

[asdf_2501]

他のところも少し変えてみて、仰った通りアニメーション関連のcssをactive内に移したところ正しく画面内に入ってからフェードインするようになりました。ありがとうございました！