如何使用Sass mixin转换仅应用转换延迟?

时间:2016-10-09 10:15:02

标签: css css3 sass css-transitions

随着我继续学习前端开发和练习Sass并优化我的CSS代码,我再次陷入了另一种情况。

在互联网上进行研究和辅导之后,我在Sass中设置了名为“过渡”的全球混音。代码如下所示:

@mixin transition($args...) {
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  -webkit-transition: $args;
  transition: $args;
}

现在,我想仅对我的span伪元素(:: before和:: after)应用 transition-delay 。默认CSS如下所示:

span::before, span::after {
  transition-delay: 0.5s, 0;
}

所以有我的问题。是否可以使用我的定义mixin'过渡'仅将过渡延迟作为参数传递?

我试过了:

@include transition(delay: .5, 0s);

但这不起作用。我试图在Sass文档中找到解决方案并在线查找一些教程,没有运气。不知道如何正确定义我的问题来搜索解决方案。

任何人都可以建议我吗?

1 个答案:

答案 0 :(得分:1)

您可以使用一种方法将属性名称作为参数传递给mixin

@mixin transition($prop, $values...) {
  -moz-#{$prop}: $values;
  -ms-#{$prop}: $values;
  -o-#{$prop}: $values;
  -webkit-#{$prop}: $values;
  $prop: $values;
}

div {
  @include transition(transition, color 1s, background-color 1s, border-color 1s);
  /* transition shorthand property can animate multiple CSS properties */
}

p {
  @include transition(transition-delay, 0.5s)
}

这给出了以下CSS的编译

div {
  -moz-transition: color 1s, background-color 1s, border-color 1s;
  -ms-transition: color 1s, background-color 1s, border-color 1s;
  -o-transition: color 1s, background-color 1s, border-color 1s;
  -webkit-transition: color 1s, background-color 1s, border-color 1s; }

p {
  -moz-transition-delay: 0.5s;
  -ms-transition-delay: 0.5s;
  -o-transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s; }