Discussion :

[ZakiDev]

Bonjour,

J'ai un petit Portfolio en ligne avec quelques éléments qui défilent grâce à une propriété CSS animation et l'Observer de JS.

Ce que j'aimerais c'est que chaque élément s'anime une seule fois seulement. J'ai essayé avec le unObserve dans une condition mais quand je le fais, dès qu'un premier élément s'anime, le reste n'est plus observé, donc ne s'anime plus, ce qui est logique. En fait je suis obligé d'avoir la vue sur tous les éléments pour que la condition fonctionne, ce qui n'est pas du tout optimal.

Mon site en ligne pour avoir un apercu des éléments en question : Suffit de taper zak bouhou sur Google, premier résultat.

Voici mon code JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const animatedElements = document.querySelectorAll('.skillName, .iconSkills, .itemsProject');
 
observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            //console.log('in the view');
            entry.target.classList.add('anim');
        } else {
            //console.log('out of view');
            entry.target.classList.remove('anim');
        }
    });
});
 
 
animatedElements.forEach(animatedElement => {
    observer.observe(animatedElement);
});

Rapide commentaire du code : Une premiere variable qui va stocker tous les éléments sur lesquels on veut mettre un observer.
On crée un nouvel Object Observer. Pour chaque entrée, si l'élement est intercepté, on lui ajoute la classe anim (attribut CSS). Sinon (si l’élément n,'est plus observé) on retire l'animation.

on va ensuite appliquer l'observer à chaque élément parcouru.

Si vous avez un conseil je suis preneur. Merci d'avance

[NoSmoking]

Bonjour,
pas trop regardé ce que tu cherches à faire et comment mais as-tu essayé de mettre un disconnect() dans ton IntersectionObserver ?

[ZakiDev]

En fait j'ai un certain nombre d'éléments qui s'animent quand elle apparaissent à l'écran.
Ce que je veux c'est de pouvoir animer chacun de tous ces éléments UNE SEULE FOIS seulement.

Je sais qu'on peut utiliser la propriété unobserve mais je ne sais pas où la placer dans mon code.

Pour dire simplement, c'est comme si j'ai deux carrés de couleurs différentes dans une page et qu'à la vue de ces deux carrés, ces derniers se déplacent chacun seulement une fois et retournent à leur position initiale après un unObserve.

Quand je place unObserve ou disconnect dans la condition isIntersecting après l'ajout de la class "anim" ce qui se passe c'est que quand mon élément n'est pas observé et que je passe l'écran dessus, alors là j'ai mes premiers éléments qui s'animent (logique) mais le reste ne s'animent plus, ce qui est aussi logique.

Avec le disconnect ca donne ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const animatedElements = document.querySelectorAll('.skillName, .iconSkills, .itemsProject');

observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            //console.log('in the view');
            entry.target.classList.add('anim');
            disconnect();
        } else {
            //console.log('out of view');
            entry.target.classList.remove('anim');
        }
    });
});


animatedElements.forEach(animatedElement => {
    observer.observe(animatedElement);
});
function disconnect () {
    animatedElements.forEach(animatedElement => {
        observer.disconnect(animatedElement);
    });
}

Note : ce qui est en gras c'est ce que j'ai rajouté.

[NoSmoking]

Avec le disconnect ca donne ca :

je n'ai jamais utilisé disconnect de la sorte, exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
const intersectionObserver = new IntersectionObserver(function(entries) {
  // ne s'exécute qu'une fois
  this.disconnect();
  // ...
});
intersectionObserver.observe(elemObserve);

[ZakiDev]

Quelque chose m'échappe. J'avoue ne pas être hyper calé sur l'observer.
Je comprends pas la différence entre le unobserve et le disconnect et ton exemple.

Comment on peut savoir que le this.disconnect ne s'exécute qu'une fois sachant que sa fonction même c'est d'arréter l'observation ?

[NoSmoking]

je n'avais pas vu ton sélecteur multiple !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const animatedElements = document.querySelectorAll(".skillName, .iconSkills, .itemsProject");
const observer = new IntersectionObserver(entries => {
//const observer = new IntersectionObserver(function(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add("red");
      // stoppe l'observation sur élément cible
      observer.unobserve(entry.target);
    }
    else {
      // ne sera plus vue après  
      entry.target.classList.remove("red");
    }
  });
});

Je comprends pas la différence entre le unobserve et le disconnect et ton exemple.

• disconnect()	: stoppe l'observation sur tous les éléments ciblés
• unobserve(elementCible)	: stoppe l'observation sur l'élément passé en paramètre

[ZakiDev]

Nickel merci pour ton aide et réactivité.

Ça fonctionne !