Question

我有两个不同的类，我追加到不同配置的各种html元素，以实现不同的转换选项。例如。仅color转换，仅border转换，或color和border转换。当我为一个具有transition属性的html元素添加两个类时，只有一个过渡属性可用。

在下面的示例中，在button B color过渡不起作用。我知道我可以分别为每个元素创建transition: color .1s, border .1s等等，但是使用类方法可以减少代码。

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>

Answer 1

如果设置两次CSS属性，则一个值将覆盖另一个值。永远不会以相加的方式对待它。

您需要立即应用所有值的部分。

您可以始终：

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

或仅在合并课程时：

.anim-color.anim-border {
    transition: color .1s, border .1s
}

Answer 2

好的，最后SASS对我做了伎俩。它将单独的transition属性'值连接成一个以逗号分隔的值。

@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);
}

编译好的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; }

Answer 3

我认为你应该试试这个

＆＃13;

 	   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;
	}

＆＃13;

<button class="anim-color">button A</button>
<button class="anim-color anim-border">button B</button>

＆＃13;

如何将两个带有transition属性的CSS类添加到一个HTML元素中？

3 个答案: