Répétition sur répétition

JSS
Javascript

Bonjour,

J'ai un petit souci qui revient souvent et qui m'agace beaucoup, je me répète très souvent avec mon code, j'ai un peu l'impression d'être passer a coté de quelque chose quand je développe en js mais je ne sais pas quoi..

Ce que je fais

J'essaye de faire un truc tout simple : créer une animation qui fera 'tomber' mes divs au fur et à mesure.
Donc pour le moment j'ai mon container, dans lequel j'ai des divs en height : 0% et je les passe en height : 100% que j'associe a un setTimeout à chaque fois.

setTimeout(function reveal(){
  document.querySelector('nav').style.height = '100%';
  setTimeout(function(){ document.querySelector('.hotel1').style.height = '100%'; }, 2000);
  setTimeout(function(){ document.querySelector('.hotel2').style.height = '100%'; }, 2500);
  setTimeout(function(){ document.querySelector('.hotel3').style.height = '100%'; }, 3000);

  setTimeout(function(){ document.querySelector('.logo-masq').style.opacity = '1'; }, 3200);
  setTimeout(function(){ document.querySelector('.logo-hsn').style.opacity = '1'; }, 3400);
  setTimeout(function(){ document.querySelector('.logo-bnb').style.opacity = '1'; }, 3600);

} ,8000);

Ce que je veux

Donc ça marche, mais c'est absolument dégueulasse, c'est pas maintenable et riche en ressources pour pas grand-chose..
Je cherche une solution 'globale' si possible, car c'est une problématique que je rencontre très souvent malheureusement.

1 réponse

Virax
Réponse acceptée

Salut,
L'idée c'est d'abstraire tes elements dans un tableau d'objets, en l'occurence, tes differents elements avec des classes (.hotel1, .hotel2 etc...);
Chacun de tes elements possède des propriétés, en l'occurence de style (opacity, height etc...)

Tu peux donc créer un tableau d'objets, ou chaque objet aura une propriété selector, qui fera reference à sa classe, et une propriété style, pour ses attributs de style, exemple:

var items = [
  {selector: '.hotel1', style: {height: '100%', opacity: 1}},
  {selector: '.hotel2', style: {height: '100%', opacity: 1}},
  {selector: '.hotel3', style: {height: '100%', opacity: 1}},
  {selector: '.logo-masq', style: {opacity: '1'}},
  {selector: '.logo-hsn', style: {opacity: '1'}},
  {selector: '.logo-bnb', style: {opacity: '1'}}
];

Pour le css je te suggère de mettre toutes les propriétés que tu veux animer ou modifier à leur état initial, et en bonus ajouter une regle pour la transition :

.hotel1, .hotel2, .hotel3 {
  height: 0px;
  opacity: 0;
  transition: all .4s
}
.logo-masq, .logo-hsn, .logo-bnb {
  opacity: 0;
  transition: opacity .2s
}

Ensuite il nous reste plus qu'à boucler sur notre tableau, et pour chaque element:

  • le selectionner dynamiquement avec son attribut selector
  • appliquer le style de l'element parcouru en fusionnant ses propriétés avec celui selectionné

Pour le décalage, il suffit simplement de multiplier l'index courant par un delay choisi !

Ce qui donne un truc dans le genre:

setTimeout(function() {
  items.forEach(function(item, index) {
    setTimeout(function(){
      let el = document.querySelector(item.selector);
      Object.assign(el.style, item.style);
    }, delay * index)
  })
}, delay);

je t'ai fait un JsFiddle complet en example:
https://jsfiddle.net/odmqjeu0/4/