Sass - disparition de border
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:
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:
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.
