Discussion :

[arwin]

Bonjour,
j'essaye de faire une animation en CSS. Il s'agit d'un bouton qui se déplace de droite à gauche et vient donc "pousser" une div qui se trouve donc à gauche. Cette div contient du texte et lorsqu’elle rétrécit suffisamment le texte est tronqué est les 3 points apparaissent.

J'ai essayé avec flex en suivant les indications de ce site https://meetrix.io/blog/posts/shrink...dd-3-dots.html avec d'autres remarques que j'ai pu glaner à droite et à gauche mais j'arrive toujours pas à avoir cet effet de texte qui "disparait" au fur et à mesure que le bouton avance.

Merci pour votre aide

P.S dans le bouton il y a une icône animée mais là n'est pas le problème

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
<div class="menus">
  <div class="namePlat">
    <h3>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</h3>
    <p>Lorem ipsumLorem ipsumLorem ipsum</p>
  </div>
 
  <div class="price">
    <p>25€</p>
  </div>
  <div class="box">
    <div class="check">
      <img src="img/check24.png" alt="#">
    </div>
  </div>
 
</div>

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
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
.price {
  position: absolute;
  right: 2em;
  top: 2em;
  width: 10%;
  transform: translateX(0);
  transition: transform 1000ms;
}
 
.box {
  transform-origin: 100%;
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: 100%;
  background-color: yellow;
  border-radius: 0 20px 20px 0;
  color: green;
  transform: scaleX(0);
  transition: transform 1000ms;
  .check {
    position: absolute;
    right: 30%;
    top: 35%;
    margin: auto;
    transform: rotate(-360deg);
    transition: transform 1500ms ease-in-out;
  }
}
 
.namePlat {
  min-width: 0;
  white-space: nowrap;
  p,
  h3 {
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
 
.menus {
  display: flex;
  cursor: pointer;
  &:hover>.box {
    transform: scaleX(1);
    .check {
      transform: rotate(0deg);
    }
  }
  &:hover>.price {
    flex-shrink: 0;
    transform: translateX(-5em);
  }
  &:hover>.namePlat {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    p,
    h3 {
      max-width: 400px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

[NoSmoking]

Bonjour,
Nota : ton code SCSS ne nous aide pas à voir rapidement si il y a une erreur, il est préférable de poster directement le code CSS. (3^éme remarques du même type en peu de temps, c'est sûrement lié à des exercices !).

Il te faut penser plus simple dans ton approche, beaucoup de propriétés ne servent à rien si ce n'est à embrouiller

Je te propose d'essayer le sCSS suivant :

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
.namePlat {
  flex-grow: 1;
  width: 10em;
  background: #def;
 
  p,
  h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.price {
  width: 8em;
  background: #fde;
}
.box {
  display: flex;
  width: 0;
  background-color: yellow;
  border-radius: 0 20px 20px 0;
  color: green;
  transition: all 1s;
  .check {
    margin: auto;
    transform: rotate(-360deg);
    transition: transform 1s ease-in-out;
  }
}
.menus {
  display: flex;
  cursor: pointer;
  overflow: hidden;
 
  &:hover > .box {
    width: 5em;
    .check {
      transform: rotate(0deg);
    }
  }
  &:hover > .price {
  }
  &:hover > .namePlat {
  }
}

PS : voir cette discussion dont l'effet me semble proche : Animation bouton en Css

[arwin]

Merci NoSmoking,
j'ai utilisé ton code mais ça ne marche pas. Je vais le retravailler encore en utilisant tes remarques ...

[NoSmoking]

j'ai utilisé ton code mais ça ne marche pas.

Je viens de créer un codepen, il m'en coûte, pour tester ce que je t'ai fourni et pour moi cela fonctionne « bien ».
Code HTML :

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
<div class="menus">
  <div class="namePlat">
    <h3>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</h3>
    <p>Lorem ipsumLorem ipsumLorem ipsum</p>
  </div>
 
  <div class="price">
    <p>25€</p>
  </div>
  <div class="box">
    <div class="check">
      <svg width="72" viewBox="0 0 16 16" fill="currentColor">
        <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 011.071 1.05l-3.992 4.99a.75.75 0 01-1.08.02L4.324 8.384a.75.75 0 111.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 01.02-.022z"></path>
      </svg>
    </div>
  </div>
</div>

j'ai juste remplacé ton image par un SVG, insipiré de l'autre discussion.

Code sCSS :

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
.namePlat {
  flex-grow: 1;
  width: 10em;
  background: #def;
 
  p,
  h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.price {
  width: 8em;
  background: #fde;
}
.box {
  display: flex;
  width: 0;
  transition: all 1s;
 
  .check {
    margin: auto;
    border: 4px solid currentColor;
    border-radius: 50%;
    color: #690;
    background-color: #efd;
    transition: transform 1s;
    transform: rotate(180deg);
  }
}
 
.menus {
  display: flex;
  width: 80%;
  margin: auto;
  border: 1px solid black;
  overflow: hidden;
  cursor: pointer;
 
  &:hover > .box {
    width: 5em;
    .check {
      transform: rotate(0deg);
    }
  }
}

Pas de gros changement par rapport à ce qui a été fourni

Exemple sur CodePen : https://codepen.io/NoSmoking/pen/NWNopRZ

[arwin]

Désolé pour le retard .. je prépare une soutenance et c'est des nuits blanches qui s'enchaînent ... Merci beaucoup NoSmoking. Effectivement ça marche très bien et c'est propre.
Quand j'avais dit que ça ne marchait pas, c'était par rapport au reste de mon code, c'est pour cela que j'ai dis que j'allais encore le retravailler. Je ne doute pas de ta compétence ... surtout au vue des nombreuses étoiles qui décorent ton nom . Chapeau t'es un maître ..

[NoSmoking]

Je ne doute pas de ta compétence ... surtout au vue des nombreuses étoiles qui décorent ton nom .

On n'a pas forcément le temps de tout tester alors les erreurs restent possibles.

Attention ces étoiles là ne servent qu'a faire rêver, ce n'est aucunement la réalité

Bonne chance pour ta soutenance.