Exercice sur la transition en CSS

2 pièce(s) jointe(s)

Bonjour,

Je suis actuellement par correspondance une formation de développeur web. Je suis actuellement sur un exercice de "transition".

Je dois faire apparaitre du texte au passage de la souris de chaque bloc. J'ai réussi en utilisant la propriété "display", seulement on me demande de plutôt agir sur le "height"

Je cherche la solution mais je n'arrive jamais au résultat de la propriété display, quelqu'un pourrait-il m'aider?

Merci d'avance

Je vous envoie ci-dessous ce que j'ai réalisé avec display :

Code:

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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="transition.css" type="text/css" />
    <title>Transition</title>
</head>
 
<body>
    <nav>
        <ul>
            <li>
                <div class="menu">Article 1</div>
                <p>Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam. Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.</p>
            </li>
 
            <li>
                <div class="menu">Article 2</div>
                <p>Mox dicta finierat, multitudo omnis ad, quae imperator voluit, promptior laudato consilio consensit in pacem ea ratione maxime percita, quod norat expeditionibus crebris fortunam eius in malis tantum civilibus vigilasse, cum autem bella moverentur externa, accidisse plerumque luctuosa, icto post haec foedere gentium ritu perfectaque sollemnitate imperator Mediolanum ad hiberna discessit.</p>
            </li>
 
            <li>
                <div class="menu">Article 3</div>
                <p>Intellectum est enim mihi quidem in multis, et maxime in me ipso, sed paulo ante in omnibus, cum M. Marcellum senatui reique publicae concessisti, commemoratis praesertim offensionibus, te auctoritatem huius ordinis dignitatemque rei publicae tuis vel doloribus vel suspicionibus anteferre.</p>
            </li>
 
            <li>
                <div class="menu">Article 4</div>
                <p>Et quia Mesopotamiae tractus omnes crebro inquietari sueti praetenturis et stationibus servabantur agrariis, laevorsum flexo itinere Osdroenae subsederat extimas partes, novum parumque aliquando temptatum commentum adgressus. quod si impetrasset, fulminis modo cuncta vastarat. erat autem quod cogitabat huius modi.</p>
            </li>
        </ul>
 
    </nav>
 
</body>
 
</html>

Code:

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
body {
    padding: 0;
    margin: 0;
}
 
ul {
    padding: 0;
}
 
.menu {
    cursor: pointer;
    margin: 25px;
    padding: 5px;
    width: 300px;
    background-color: darkgrey;
    border-radius: 20px;
}
 
p {
    display: none;
    padding: 5px;
    margin: 25px;
    width: 300px;
    -webkit-transition: height 1s ease-out;
    transition: height 1s ease-out;
}
 
.menu:hover + p {
    display: block;
}

Bonjour,

A- Une solution :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
.menu + p {
  overflow:hidden;
  width: 300px;
  margin: 25px;
  height:0;
  -webkit-transition: height 1s ease-out;
  transition: height 1s ease-out;
}
 
.menu:hover + p {
  height: 300px; /* on est obligé de définir une hauteur fixée */
  white-space: normal;
}

B- si l'idée est de montrer la première ligne de chaque <p> (avec des points de suspension : ...) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.menu + p {
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis; /* ajoute des points de suspension : ... */
 
  padding: 5px;
  margin: 25px;
  width: 300px;
}
 
.menu:hover + p {
  height: auto;
  white-space: normal;
}

Remarque : on ne peut pas utiliser un "transition souple" (slide Down/Up) avec height: auto;.

Soit :
B1- on doit définir une hauteur fixée (en px) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.menu + p {
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding: 5px;
  margin: 25px;
  width: 300px;
  height:20px;
  -webkit-transition: height 1s ease-out;
  transition: height 1s ease-out;
}
 
.menu:hover + p {
  height: 300px; /* on est obligé de définir une hauteur fixée */
  white-space: normal;
}

B2- Sinon, il faut utiliser du JS.

Bonsoir,

Un gros merci pour votre aide, ça marche impécable :D;)

Bonne soirée

Christian