[Vuejs]-Problem and intersection observe how to make the code run at each element?

by

0👍

You’re looping throug your elements and immediately removing/adding the classes that handle the animation; So, you’re showing all your elements regardless of the intersectionOberserver.

Don’t manage your classes when looping the elements but within the observer callback function

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");
    }
  });
});

Now, you need to pass different classes for different items. Instead of setting different oberservers or callbacks, I (personally) would do it by storing the class name as data-visibleClass property on HTML elements.

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

Then, access to it from the observer callback

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);
    }
  });
});

Learn more here:
Intersection Observer API | MDN

0👍

they appear with dataset element by element but the animations do not start they do not work the sentences simply reappear , and the class appear undefind in html class what’s solution is for animations ?

<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>

0👍

hello i’m use bootstrap here document class of invisible and visible class

<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);
}

Leave a comment