较少的过渡混合

有人可以展示如何使用以下LESS mixin以线性方式转换.25s的以下属性吗？ @H_301_2@border-top：6px solid#ff3300;

.transition-properties(...) {
@props: ~`"@{arguments}".replace(/[\[\]]/g,'')`;
-webkit-transition-property: @props;
-moz-transition-property: @props;
-o-transition-property: @props;
transition-property: @props;
}

解决方法

更新：LESS 1.4能力 @H_301_2@使用LESS 1.4,不需要在逗号分隔参数的原始答案中使用的javascript.相反,在参数字符串末尾使用“虚拟”分号会导致逗号被视为列表分隔符,而不是参数分隔符,因此现在可以在输入多个转换时使用：

@H_301_2@少1.4

@H_301_2@mixin调用中的分号(.transition-properties(border-top .25s linear,color .5s linear;);)非常重要.如果省略,则将删除两个参数之间的逗号,这将以无效的css规则结束.

.transition-properties(...) {
  -webkit-transition: @arguments;
  -moz-transition: @arguments;
  -o-transition: @arguments;
  transition: @arguments;
}


.yourClass {
  border-top: 1px solid black;
  .transition-properties(border-top .25s linear,color .5s linear;); /* semicolon is necessary */
}                                                                |
                                                          NOTE THIS SEMICOLON

.yourClass:hover {
  border-top: 6px solid #ff3300;
}

@H_301_2@CSS输出

@H_301_2@请注意,逗号位于两个属性值之间：

.yourClass {
  border-top: 1px solid black;
  -webkit-transition: border-top 0.25s linear,color 0.5s linear;
  -moz-transition: border-top 0.25s linear,color 0.5s linear;
  -o-transition: border-top 0.25s linear,color 0.5s linear;
  transition: border-top 0.25s linear,color 0.5s linear;
}
.yourClass:hover {
  border-top: 6px solid #ff3300;
}

@H_301_2@原始答案[Pre LESS 1.4]

@H_301_2@显然,细节将取决于您的确切实施.但是,这一般说明了如何使用它：

@H_301_2@减

.transition-properties(...) {
@props: ~`"@{arguments}".replace(/[\[\]]/g,'')`;
-webkit-transition: @props;
-moz-transition: @props;
-o-transition: @props;
transition: @props;
}


.yourClass {
  border-top: 1px solid black;
  .transition-properties(border-top .25s linear);
}

.yourClass:hover {
  border-top: 6px solid #ff3300;
}

@H_301_2@CSS输出

.yourClass {
  border-top: 1px solid black;
  -webkit-transition: border-top 0.25s linear;
  -moz-transition: border-top 0.25s linear;
  -o-transition: border-top 0.25s linear;
  transition: border-top 0.25s linear;
}
.yourClass:hover {
  border-top: 6px solid #ff3300;
}

@H_301_2@See Example Fiddle

@H_301_2@说明

@H_301_2@什么的

@props: ~`"@{arguments}".replace(/[\[\]]/g,'')`;

@H_301_2@允许你做的是放入多个逗号分隔的转换,例如：

.transition-properties(border-top .25s linear,color 1s linear);

@H_301_2@将编译以使它们用逗号分隔(例如只显示一行)：

transition: border-top 0.25s linear,color 1s linear;

@H_301_2@如果你刚刚使用直接的@arguments,你最终没有逗号分隔：

transition: border-top 0.25s linear color 1s linear;

@H_301_2@哪个属性不正确.

较少的过渡混合

解决方法

猜你在找的CSS相关文章