Discussion :

[AlexG21000]

Bonjour,

J'ai un soucis avec la propriété border, qui n'est plus actif une fois que j'applique le modificateur --translate.
Et aussi un soucis avec smallball, lorsque j'applique un modificateur --linear elle n'apparaît plus à l'écran.
Et dernier soucis, pour le transalteX() si je met 100% il n'avance que d'une centaine de px, alors que pourtant la largeur de la boîte est de 800px, du coup je pige pas non plus.

Donc j'ai du louper quelques chose avec les modificateur BEM dans Sass.

le scss:

Code scss :

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
 
/*Une boîte à boule*/
.ball-box {
    width: 800px;
    margin: auto;
    border: 2px solid black; /*!!!la bordure ne focntionne pas quand --translate*/
    &--translate:hover .smallball {
        transform: translateX(750px);
    }
}
 
/*La boule*/
.smallball {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    width: 50px;
    height: 50px;
    background: blue;
    border-radius: 25px;
    transition: transform 2000ms;
    &--linear {
        transition-timing-function: linear;
    }
}

Le html:

Code html :

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

1
2
3
4
 
<div class="ball-box--translate">
	<div class="smallball--linear"></div>
</div>

J'apprends actuellement les animations, et lorsque je ne met pas de modificateur tous fonctionne, mais je souhaiterais faire apparaître plusieurs boîte à boule avec leur boule, les unes en dessous des autres, et leur appliquer des modificateurs en fonction de l'effet que je teste.

[NoSmoking]

Bonjour et bienvenue sur DVP.

Donc j'ai du louper quelques chose avec les modificateur BEM dans Sass.

C'est SASS ou SCSS que tu utilises ?

Quoiqu'il arrive il te faut regarder le code compilé et tu verras que tes sélecteurs ne correspondent pas aux classes affectées à ton HTML

Code :

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

1
2
3
4
5
6
7
8
9
/*Une boîte à boule*/
.ball-box {
    width: 800px;
    margin: auto;
    border: 2px solid black; /*!!!la bordure ne focntionne pas quand --translate*/
    &--translate:hover .smallball {
        transform: translateX(750px);
    }
}

va donner quelque chose comme :

Code :

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

1
2
3
4
5
6
7
8
.ball-box {
    width: 800px;
    margin: auto;
    border: 2px solid black;
}
.ball-box--translate:hover .smallball {
    transform: translateX(750px);
}

mais tu n'as pas de class .ball-box de déclarée dans ton code, idem pour .smallball.

Il te faudrait donc :

Code html :

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

1
2
3
<div class="ball-box ball-box--translate">
	<div class="smallball smallball--linear"></div>
</div>

[AlexG21000]

Alors il s'agit de Sass mais avec la méthode scss. (Je sais qu'il y a aussi l'extension .sass ou on vire pas mal de ponctuation, mais il faut que j'en garde un minimum sinon je vais être paumé.)

Du coup, j'ai fait comme tu m'a expliqué et pas de soucis, j'ai récupéré mes bordures et tous fonctionne (sauf le 100% pour le translateX(100%); qui ne fais qu'une centaine de px).

Mais donc je pensais pourtant avoir créer la classe avec le .ball-box.
Donc il y a bien quelque chose que j'ai pas pigé.

Le '.' ne définit-il pas la classe? Tous comme '#' définit l'id?

[NoSmoking]

j'ai récupéré mes bordures et tous fonctionne (sauf le 100% pour le translateX(100%); qui ne fais qu'une centaine de px).

Si le paramètre passé à la fonction CSS translate est un pourcentage alors celui-ci se réfère à la dimension de l'élément translaté, c'est, par exemple, une façon simple de centrer un élément dans un autre.

Code :

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

1
2
3
4
5
6
7
8
9
.conteneur-element-a-center {
  position: relative;    /* pour servir de référent */
}
.element-a-centrer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

EDIT : je rajoute le lien vers la spécification : 7. The Transform Functions

Le '.' ne définit-il pas la classe? Tous comme '#' définit l'id?

Oui !

[AlexG21000]

Merci pour ces explications, même si tous n'est pas encore très clair sur la manière de mettre en œuvre, les choses tournent au moins.
Je peux continuer mon apprentissage.