Question

我有这个Less mixin -

.css3-transitions(@property: color, @duration: 0.3s, @transition: ease-in) {
  -webkit-transition:@property @duration @transition;
      -moz-transition:@property @duration @transition;
           transition:@property @duration @transition;
}

我要在课堂上使用，但要排除缓和并将其应用于不透明度，所以我这样做..

.myClass{
 .css3-transition(opacity);
}

但插入的缓和也是如此。例如CSS的结果是......

 -webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in;

如何排除缓和？

Answer 1

假设你的mixin代码保持不变，你可以在调用时专门设置LESS中的值（这里我通过给它一个转义的空字符串{{1}向@transition传递“nothing”。 }}）：

~''

请注意我不需要担心它是第三个参数，因为我明确告诉它我正在设置的参数，所以我不需要传递持续时间，因为它将保持默认值。

Answer 2

默认情况下包含'缓入'缓动。如果你把它放在外面，混合将假定你想要默认的缓和，这是'轻松'，如混合中所定义的。如果这是你需要的，你必须指定一个不同的缓动，或者修改混合代码。

较少的CSS mixin参数

2 个答案: