Mam dwie różne klasy, które dołączę do różnych elementów HTML w różnych konfiguracjach, aby uzyskać różne opcje przejścia. na przykład. TYLKO color przejście, tylko border przejście, lub przejście color i border. Gdy dodam dwie klasy dla jednego elementu HTML, który ma właściwość transition, tylko jednostki przejściowej .

W poniższej próbce, w transformacji button B color nie działa. Wiem, że mogę utworzyć transition: color .1s, border .1s itd. Dla każdego elementu oddzielnie, ale z podejściem klasowym byłoby znacznie mniej kodu.

button {
  display:block;
  border:solid 3px #33aaff;
  background-color:white;
  color:#33aaff;
  margin:5px;
  font-size:22px;
  cursor:pointer;
}

.anim-color{
  color:#33aaff;
  transition:color .2s ease-in-out;
}

.anim-color:hover{
  color:#ff55aa;
}

.anim-border{
  border:solid 3px #33aaff;
  transition:border .2s .1s ease-in-out;
}

.anim-border:hover{
  border:solid 3px #ff55aa;
}
<button class="anim-color">button A</button>
<button class="anim-color anim-border">button B</button>
-1
Paweł 19 luty 2018, 12:19

3 odpowiedzi

Najlepsza odpowiedź

Jeśli ustawisz właściwość CSS dwa razy, jedna wartość zastąpi drugi. Nigdy nie będzie traktowany w sposób dodatkowy.

Musisz zastosować wszystkie elementy wartości jednocześnie.

Możesz zrobić to cały czas :

button {
    transition: color .1s, border .1s
}

Lub tylko wtedy, gdy klasy są łączone :

.anim-color.anim-border {
    transition: color .1s, border .1s
}
2
Quentin 19 luty 2018, 09:22

Ok, w końcu Sass zrobił mi sztuczkę. Conatenuje oddzielne wartości właściwości transition do jednej wartości oddzielonej przecinkami.

@mixin transitions($action, $compositions...){
  $list:();
  @each $getComposition in $compositions{
    $list: append($list, map-get($getComposition, transition), comma);
    @each $prop, $value in map-get($getComposition, before) {
      #{inspect($prop)}: #{inspect($value)};
    }
  }
  transition: $list;
  &:#{$action}{
    @each $getComposition in $compositions{
      @each $prop, $value in map-get($getComposition, after) {
        #{inspect($prop)}: #{inspect($value)};
      }
    }
  }
}

//The transition templates
$anim-border: (
  before:(border:solid 1px #33aaff),
  after:(border:solid 4px #ff55aa),
  transition:border .1s .4s ease-in-out
);

$anim-colors: (
  before:(background-color:white, color:#33aaff),
  after:(background-color:yellow, color:#ff55aa),
  transition:(background-color .2s ease-in-out, color .3s .2s ease-in-out)
);

//Add the 'hover' selector and comma separated list of chosen transition templates
.button-a{
  @include transitions(hover,$anim-colors, $anim-border);
}

.button-b{
  @include transitions(hover,$anim-colors);
}

.button-c{
  @include transitions(hover,$anim-border);
}

I skompilowane CSS:

.button-a {
  background-color: white;
  color: #33aaff;
  border: solid 1px #33aaff;
  transition: background-color 0.2s ease-in-out, color 0.3s 0.2s ease-in-out, border 0.1s 0.4s ease-in-out; }
  .button-a:hover {
    background-color: yellow;
    color: #ff55aa;
    border: solid 4px #ff55aa; }

.button-b {
  background-color: white;
  color: #33aaff;
  transition: background-color 0.2s ease-in-out, color 0.3s 0.2s ease-in-out; }
  .button-b:hover {
    background-color: yellow;
    color: #ff55aa; }

.button-c {
  border: solid 1px #33aaff;
  transition: border 0.1s 0.4s ease-in-out; }
  .button-c:hover {
    border: solid 4px #ff55aa; }
0
Paweł 19 luty 2018, 14:29

Myślę, że powinieneś spróbować tego

 	   button {
	  display:block;
	  border:solid 3px #33aaff;
	  background-color:white;
	  color:#33aaff;
	  margin:5px;
	  font-size:22px;
	  cursor:pointer;
		transition: 1s;
	  -webkit-transition: 1s;
	}

	.anim-color{
	  color:#33aaff;
	}

	.anim-color:hover{
	  color:#ff55aa;
	}

	.anim-border{
	  border:solid 3px #33aaff;
	}

	.anim-border:hover{
	  border:solid 3px #ff55aa;
	}
<button class="anim-color">button A</button>
<button class="anim-color anim-border">button B</button>
-1
yogesh 19 luty 2018, 10:14