Comment animer le déplacement d'une ligne de tableau ?
Bonjour,
Pour rendre plus gai l'affichage d'un tableau de palmarès (codé en PHP), je voudrais animer la ligne correspondant au résultat du dernier sportif qui vient de passer en la faisant remonter (ou redescendre) peu à peu jusqu'à atteindre sa nouvelle place dans le classement. En somme comme si on suivait du regard ce déplacement (sachant que ce déplacement serait déclenché par le script, et non manuellement par un glisser déposer à la souris bien sûr)
Je n'arrive pas à coder ça et je me demande si c'est vraiment faisable. Quelqu'un a-t-il déjà fait ce type de chose ?
En vous remerciant pour votre aide.
Vous pouvez par exemple créer deux fonctions JavaScript, l'une pour monter une ligne, l'autre pour descendre ; et cela via la méthode insertBefore.
Pour l'animation vous pouvez utiliser la propriété CSS animation.
Dans l'exemple qui suit j'ai créé deux fonctions monter() et descendre() où vous devez passer deux paramètres : le numéro de ligne de départ, et le numéro de ligne d'arrivée.
Vous devriez assez facilement pouvoir adapter le code JS si vous préférez passer de ligne à ligne, au lieu d'aller directement de la ligne de départ à celle d'arrivée : soit vous modifiez les fonctions, soit vous les appelez successivement en faisant une pause.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Comment animer le déplacement d'une ligne de tableau ?</title>
<style>
@keyframes mouvement {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0%);
opacity: 1;
}
}
.anime {
animation: mouvement .3s linear;
}
</style>
</head>
<body>
<table>
<tr>
<td>ligne numéro 1</td>
</tr>
<tr>
<td>ligne numéro 2</td>
</tr>
<tr>
<td>ligne numéro 3</td>
</tr>
<tr>
<td>ligne numéro 4</td>
</tr>
<tr>
<td>ligne numéro 5</td>
</tr>
</table>
<button onclick="monter(5,1);">Monter ligne 5 en 1ère position</button>
<button onclick="descendre(1,5);">descendre ligne 1 en 5ème position</button>
<script>
function monter(depart, arrivee) {
var tables = document.getElementsByTagName('table');
var table = tables[0];
var lignes = table.getElementsByTagName('tr');
let ligne_depart = depart - 1;
let ligne_arrivee = arrivee - 1;
lignes[ligne_depart].parentNode.insertBefore(lignes[ligne_depart], lignes[ligne_arrivee]);
lignes[ligne_arrivee].classList.add('anime');
}
function descendre(depart, arrivee) {
var tables = document.getElementsByTagName('table');
var table = tables[0];
var lignes = table.getElementsByTagName('tr');
let ligne_depart = depart - 1;
let ligne_arrivee = arrivee - 1;
lignes[ligne_depart].parentNode.insertBefore(lignes[ligne_depart], lignes[ligne_arrivee].nextSibling);
lignes[ligne_arrivee].classList.add('anime');
}
</script>
</body>