Discussion :

[eiffel-mtl]

Bonjour,

J'ai une page php qui appelle des datas depuis une BD. J'aimerais faire en sorte que chaque items apparaissent une fois que l'item précédent est apparut et que chacun reste affiché.

Voici mon

Code php :

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
<?php
 
if ($connexion) {
 // Effectuer la requête
 $query = "SELECT * FROM asset_Services";
 $result = mysqli_query($connexion, $query);
 echo '<ul id="list">';
 // Afficher les lignes du tableau en fonction de la réponse à la requête
 $index = 0;
  if ($result) {
    while($row = mysqli_fetch_assoc($result)) {
      $br = (($index = ($index + 1) % 4) ? "" : "<br>");
      echo '<li id="slider-'.$row["id"].'"><a href=""><h5 style="margin-top:20px">'.$row["nom"].'</h5></a>' . $br . '</li>';
    }
  }
 echo '</ul>';
 // Fermer la connexion
 
}
?>

Ainsi que mon code css

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
#list {
	margin: 2em auto;
	padding: 0;
	max-width: 70%;
	list-style: none;
	height: 100%;
}
 
#list a{
	color: #ccc;
}
 
#list h5 {
	color:#fff;
	margin-bottom:30px;
}
 
#list li {
	float: left;
	width: 250px;
	height: 100px;
	background: #012257;
	text-align: center;
	line-height: 20px;
	opacity: 0;
	border-radius: 10px;
	margin-bottom:20px;
	margin-right:30px;
 
}
 
#slider-1 {
	animation: fadeIn 5s 1 ease-in;
	animation-duration: 5s;
	animation-delay: 5s;
	opacity:1;
}
 
#slider-2 {
	animation: fadeIn 5s 1 ease-in;
	animation-duration: 5s;
	animation-delay: 10s;
	opacity:1;
}
#slider-3 {
	animation: fadeIn 5s 1 ease-in;
	animation-duration: 5s;
	animation-delay: 15s;
	opacity:1;
}
 
#slider-4 {
	animation: fadeIn 5s 1 ease-in;
	animation-duration: 5s;
	animation-delay: 20s;
	opacity:1;
}
#slider-5 {
	animation: fadeIn 5s 1 ease-in;
	animation-duration: 5s;
	animation-delay: 25s;
	opacity:1;
}
 
 
 
 
@keyframes fadeIn {
	from {
		display: none;
		opacity: 0;
		transform: translate3d(0, -20%, 0);
	}
	to {
		display: block;
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

Chaque item de la liste porte un numéro unique (pris depuis le id de l'item).

Merci

[unanonyme]

Bonjour,

Plutôt que d'utiliser des règles CSS pour appliquer le délai,
vous pourriez le générer en PHP
et le déclarer en ligne dans la balise li avec une propriété style.

En JavaScript, j'avais fait cela

Code html :

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
25
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<style>
  li{
    transition: opacity 2s;
    opacity: 0;
  }
  ul.show li {
    opacity: 1;
  }
</style>
<script>
  window.addEventListener("load", () => {
    const it = document.querySelectorAll("li");
    const step = 1;
    const min = 1;
    for (var i=0; i<it.length;i++) {
      it[i].style.transitionDelay = ( min + (step*i) )+"s";
    }
    document.querySelector("ul").classList.add("show")
  })
</script>

En CSS pur je n'ai pas trouvé d'option, counter ne fonctionne pas, et en cherchant plus amont je suis tombé sur

https://github.com/w3c/csswg-drafts/issues/4559

[css-values] Proposal: add sibling-count() and sibling-index() #4559

Bonne journée.