问题和交叉点观察如何使代码在每个元素处运行？

Question

我有一个问题，所有作品，但动画代码在检测到元素后立即执行，所有动画都已经制作，而它们尚未出现在屏幕上，根据它们的可见性它不会出现。如何恢复此代码中的顺序，而不是在它越过其中一个元素时立即执行所有动画。这是我的组件

<template>
  <div class="bg-white">
    <div>
      <div class="  d-flex justify-content-center align-items-center">
        <h2 id="objectif" class="texte invisible py-5">Mes Objectifs</h2>
      </div>

      <div
        class="d-flex flex-column justify-content-center paragraphe bg-secondary"
      >
        <h3 class="invisible paratop1 text-white ">
          " Aime développer produire dans le web rester connecté à la
          technologie. "
        </h3>
        <h3 class="invisible paratop2 text-white">
          " Vous rendre de la qualité , du travail bien fait , un service
          optimiser. "
        </h3>
      </div>
    </div>
    <div>
      <Competences />
    </div>
    <div class="mb-5">
      <div class="d-flex justify-content-center align-items-center">
        <h2
          class="d-flex justify-content-center align-items-center rounded-pill text-pop-up-top text-white my-5"
        >
          Quelles sont mes offres ?
        </h2>
      </div>
      <div class="bg-secondary paragraphe">
        <h5 class="text-white pt-5">
          <ul class="para1">
            <li>
              - Vous avez un projet : création de plate-forme e-commerce
            </li>
            <br />
            <li>
              - Vous révez d'avoir votre propre réseau social et marquer
              l'histoire
            </li>
            <br />
            <li>
              - Vous aspirez à faire valoir votre savoir-faire
            </li>
            <br />
            <li>
              - Vous voulez dévelloper votre entreprise
            </li>
            <br />
            <li>
              - Où simplement afficher votre présence dan le monde digitale
            </li>
          </ul>
        </h5>
        <h4 class="para2 text-white pt-5">
          Mes services correspondront donc peut être à ce que vous avez peut
          être toujours chercher !
        </h4>
      </div>
    </div>
    <div class="d-flex justify-content-center align-items-center">
      <h2 class="boxt mb-0 pb-5 pt-5">Mes projets</h2>
    </div>
    <div>
      <Carte />
    </div>
  </div>
</template>

<script>
import Competences from "./competences.vue";
import Carte from "./carte.vue";
export default {
  name: "contenu",
  components: {
    Competences,
    Carte,
  },
  mounted() {
    let observer = new IntersectionObserver(function(observables) {
      observables.forEach(function(observable) {
        // L'élément devient visible
        if (observable.intersectionRatio > 0.9) {
          console.log(observables);
        }
      });
    });
    let objectifs = document.querySelectorAll("#objectif");
    objectifs.forEach(function(objectif) {
      observer.observe(objectif);
      objectif.classList.remove("invisible");
      objectif.classList.add("boxt");
    });
    let para11 = document.querySelectorAll(".paratop1");
    para11.forEach(function(para1) {
      observer.observe(para1);
      para1.classList.remove("invisible");
      para1.classList.add("para1");
    });
    let para22 = document.querySelectorAll(".paratop2");
    para22.forEach(function(para2) {
      observer.observe(para2);
      para2.classList.remove("invisible");
      para2.classList.add("para2");
    });
    /*
    const objectif = document.getElementById("objectif");
    const paratop1 = document.querySelector(".paratop1");
    const paratop2 = document.querySelector(".paratop2");

    window.addEventListener("scroll", () => {
      if (window.scrollY > 100) {
        objectif.classList.remove("invisible");
        objectif.classList.add("boxt");
        console.log("scroll");
      }
      if (window.scrollY > 200) {
        paratop1.classList.remove("invisible");
        paratop2.classList.remove("invisible");
        paratop1.classList.add("para1");
        paratop2.classList.add("para2");
        console.log("scroll");
      }
    });
    */
  },
};
</script>

<style lang="scss">
.boxt {
  animation: 1s linear boxt;
}
.boxb {
  animation: 1s linear boxb;
}
.para1 {
  animation: 1s linear para1;
}
.para2 {
  animation: 1s linear para2;
}
@keyframes boxt {
  0% {
    opacity: 0;
    transform: translateX(200%);
  }
  100% {
    opacity: 1;
  }
}
@keyframes boxb {
  0% {
    opacity: 0;
    transform: translateX(-200%);
  }
  100% {
    opacity: 1;
  }
}
@keyframes para1 {
  0% {
    opacity: 0;
    transform: translateY(-200%);
  }
  100% {
    visibility: hidden;
    opacity: 1;
  }
}
@keyframes para2 {
  0% {
    opacity: 0;
    transform: translateY(200%);
  }
  100% {
    visibility: hidden;
    opacity: 1;
  }
}
.text-pop-up-top {
  height: 60px;
  width: 15em;
  background-color: #aca5a5;
  animation: text-shadow-pop-top 0.6s both;
}
@keyframes text-shadow-pop-top {
  0% {
    text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555,
      0 0 #555555, 0 0 #555555, 0 0 #555555;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    text-shadow: 0 -1px #555555, 0 -2px #555555, 0 -3px #555555, 0 -4px #555555,
      0 -5px #555555, 0 -6px #555555, 0 -7px #555555, 0 -8px #555555;
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
</style>

Answer 1

您正在循环遍历您的元素并立即删除/添加处理动画的类；因此，无论intersectionOberserver 是什么，您都会显示所有元素。

不要在循环元素时管理你的类，而是在观察者回调函数中

objectifs.forEach(function(objectif) {
  observer.observe(objectif);

  // Apply the observer but don't manage the classes here
  // objectif.classList.remove("invisible");
  // objectif.classList.add("boxt");
});

---

let observer = new IntersectionObserver(function(observables) {
  observables.forEach(function(observable) {
    // L'élément devient visible
    if (observable.intersectionRatio > 0.9) {
      const element = observable.target;

      element.classList.remove("invisible");
      element.classList.add("boxt");
    }
  });
});

---

现在，您需要为不同的项目传递不同的类。我（个人）不会设置不同的观察者服务器或回调，而是将类名存储为 HTML 元素上的 data-visibleClass 属性。

<h2 id="objectif" class="texte invisible py-5" data-visibleClass="boxt">Mes Objectifs</h2>

然后，从观察者回调中访问它

let observer = new IntersectionObserver(function(observables) {
  observables.forEach(function(observable) {
    // L'élément devient visible
    if (observable.intersectionRatio > 0.9) {
      const element = observable.target;
      const visible = element.dataset.visibleClass;

      element.classList.remove("invisible");
      element.classList.add(visible);
    }
  });
});

---

在此处了解更多信息： Intersection Observer API | MDN

Answer 2

它们与数据集元素一起出现，但动画没有开始它们不起作用，句子只是重新出现，并且类在 html 类中出现 undefind 动画的解决方案是什么？

<template>
  <div class="bg-white">
    <div>
      <div class="  d-flex justify-content-center align-items-center">
        <h2 id="objectif" class="invisible py-5" data-visibleClass="boxt">
          Mes Objectifs
        </h2>
      </div>

      <div
        class="d-flex flex-column justify-content-center paragraphe bg-secondary"
      >
        <h3 class="invisible paratop1 text-white " data-visibleClass="para1">
          " Aime développer produire dans le web rester connecté à la
          technologie. "
        </h3>
        <h3 class="invisible paratop2 text-white" data-visibleClass="para2">
          " Vous rendre de la qualité , du travail bien fait , un service
          optimiser. "
        </h3>
      </div>
    </div>
    <div>
      <Competences />
    </div>
    <div class="mb-5">
      <div class="d-flex justify-content-center align-items-center">
        <h2
          id="textPop"
          class="d-flex justify-content-center align-items-center rounded-pill invisible text-white my-5"
        >
          Quelles sont mes offres ?
        </h2>
      </div>
      <div class="bg-secondary paragraphe">
        <h5 class="text-white pt-5">
          <ul id="liste" class="invisible">
            <li>
              - Vous avez un projet : création de plate-forme e-commerce
            </li>
            <br />
            <li>
              - Vous révez d'avoir votre propre réseau social et marquer
              l'histoire
            </li>
            <br />
            <li>
              - Vous aspirez à faire valoir votre savoir-faire
            </li>
            <br />
            <li>
              - Vous voulez dévelloper votre entreprise
            </li>
            <br />
            <li>
              - Où simplement afficher votre présence dan le monde digitale
            </li>
          </ul>
        </h5>
        <h4 id="liste2" class="invisible text-white pt-5">
          Mes services correspondront donc peut être à ce que vous avez peut
          être toujours chercher !
        </h4>
      </div>
    </div>
    <div class="d-flex justify-content-center align-items-center">
      <h2 class="boxt mb-0 pb-5 pt-5">Mes projets</h2>
    </div>
    <div>
      <Carte />
    </div>
  </div>
</template>

<script>
import Competences from "./competences.vue";
import Carte from "./carte.vue";
export default {
  name: "contenu",
  components: {
    Competences,
    Carte,
  },
  mounted() {
    let observer = new IntersectionObserver(
      function(observables) {
        observables.forEach(function(observable) {
          // L'élément devient visible
          if (observable.intersectionRatio > 0.9) {
            const element = observable.target;

            element.classList.remove("invisible");
            const visible = element.dataset.visibleClass;
            element.classList.add(visible);
          }
        });
      },
      {
        threshold: [0.9],
      }
    );
    let objectifs = document.querySelectorAll("#objectif");
    objectifs.forEach(function(objectif) {
      observer.observe(objectif);
      //objectif.classList.remove("invisible");
      //objectif.classList.add("boxt");
    });

    let para11 = document.querySelectorAll(".paratop1");
    para11.forEach(function(para1) {
      observer.observe(para1);
      //para1.classList.remove("invisible");
      //para1.classList.add("para1");
    });
    let para22 = document.querySelectorAll(".paratop2");
    para22.forEach(function(para2) {
      observer.observe(para2);
      //para2.classList.remove("invisible");
      //para2.classList.add("para2");
    });

    /*
    const objectif = document.getElementById("objectif");
    const paratop1 = document.querySelector(".paratop1");
    const paratop2 = document.querySelector(".paratop2");
    const textPop = document.getElementById("textPop");
    const liste = document.getElementById("liste");
    const liste2 = document.getElementById("liste2");

    window.addEventListener("scroll", () => {
      if (window.scrollY >= 0) {
        console.log(window.scrollY);
      }
      if (window.scrollY > 100) {
        objectif.classList.remove("invisible");
        objectif.classList.add("boxt");
      }
      if (window.scrollY > 200) {
        paratop1.classList.remove("invisible");
        paratop2.classList.remove("invisible");
        paratop1.classList.add("para1");
        paratop2.classList.add("para2");
      }
      if (window.scrollY > 1400) {
        textPop.classList.remove("invisible");
        textPop.classList.add("text-pop-up-top");
      }
      if (window.scrollY > 1550) {
        liste.classList.remove("invisible");
        liste.classList.add("para1");
      }
      if (window.scrollY > 1700) {
        liste2.classList.remove("invisible");
        liste2.classList.add("para2");
      }
    });
    */
  },
};
</script>

<style lang="scss">
.boxt {
  animation: 1.5s linear boxt;
}
.boxb {
  animation: 1s linear boxb;
}
.para1 {
  animation: 1.5s linear para1;
}
.para2 {
  animation: 1.5s linear para2;
}
@keyframes boxt {
  0% {
    opacity: 0;
    transform: translateX(200%);
  }
  100% {
    opacity: 1;
  }
}
@keyframes boxb {
  0% {
    opacity: 0;
    transform: translateX(-200%);
  }
  100% {
    opacity: 1;
  }
}
@keyframes para1 {
  0% {
    opacity: 0;
    transform: translateY(-200%);
  }
  100% {
    visibility: hidden;
    opacity: 1;
  }
}
@keyframes para2 {
  0% {
    opacity: 0;
    transform: translateY(200%);
  }
  100% {
    visibility: hidden;
    opacity: 1;
  }
}
.text-pop-up-top {
  height: 60px;
  width: 15em;
  background-color: #aca5a5;
  animation: text-shadow-pop-top 0.6s both;
}
@keyframes text-shadow-pop-top {
  0% {
    text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555,
      0 0 #555555, 0 0 #555555, 0 0 #555555;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    text-shadow: 0 -1px #555555, 0 -2px #555555, 0 -3px #555555, 0 -4px #555555,
      0 -5px #555555, 0 -6px #555555, 0 -7px #555555, 0 -8px #555555;
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
</style>

Answer 3

你好，我在这里使用 bootstrap 文档类的不可见和可见类

<div class="visible">...</div>
<div class="invisible">...</div>  // Class
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}

// Usage as a mixin
.element {
  @include invisible(visible);
}
.element {
  @include invisible(hidden);
}