Discussion :

[Romain672]

Bonjour,
Je crée un jeu pour apprendre le développement web disponible ici: https://romain672.github.io/CV-MEESE...A9s/index.html , et j'essaye de rajouter des animations dessus.
J'ai des cartes à effets par exemple "⚔️💖💖💖" qui vont par exemple infliger 1 unité de dégât ⚔️ et soigner 3 💖.
J'ai créé une animation qui permet de faire bouger un "💖" d'une div à une autre en ajoutant et enlevant une classe a une div (code ci-dessous), mais je ne peux faire bouger qu'un seul élément à la fois.
J'aurais aimé pouvoir créer 4 animations, trois de 💖 et un de ⚔️ partant et allant dans différentes divs (avec genre "animation-delay: 0s, 0.1s, 0.2s").

De ce que j'ai pu lire, le seul truc que je me sens capable de faire c'est de créer un id sur l'animation en cours, et copier/coller 100 fois une partie du code de manière à créer un maximum de 100 animations en même temps. Je pense que ça marcherait, mais le html serait moche et ce serait pas très efficace.

Merci


J'ai rajouté une div "anim" dans le html: <div id="anim"></div>.
Mon animation dans le css:

Code css :

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
#anim{
    visibility: hidden;
}
.startanimation{
    position: absolute;
    visibility: visible;
    -webkit-animation: moving 2.5s;
    animation: moving 2.5s ease;
    animation-name: heart;
}
@keyframes heart {
    from {
    left: var(--ls, 0px);
    top: var(--ts, 0px);
    visibility: visible;
    }
    to {
    left: var(--le, 0px);
    top: var(--te, 0px);
    visibility: hidden;
    }
}

Et enfin du javascript qui avec une string, une div de départ et une div d'arrivé permet de faire bouger une animation:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function animate(string, start, end) {
  document.getElementById("anim").classList.add("startanimation");
  let var1= document.getElementById(start).getBoundingClientRect();
  let var2= document.getElementById(end).getBoundingClientRect();
  document.getElementById("anim").textContent = string;
  document.getElementById("anim").style.setProperty("--ls", var1.left + "px");
  document.getElementById("anim").style.setProperty("--ts", var1.top + "px");
  document.getElementById("anim").style.setProperty("--le", var2.left + "px");
  document.getElementById("anim").style.setProperty("--te", var2.top + "px");
  setTimeout(() => {
    document.getElementById("anim").classList.remove("startanimation");
  }, 2500);
}

[mathieu]

à quoi correspond le nombre de 100 dont vous parlez ? avez-vous déjà testé avec 2 ou 3 animations ?

et si le code css ne peux pas être factorisé, vous pouvez essayez d'utiliser un préprocesseur comme less par exemple pour travailler avec du code plus facilement maintenable :
https://lesscss.org/