SASS/Compass转换效果

Question

能否使用Compass或SASS输出包含所有浏览器前缀的CSS过渡效果：

-webkit-transition: all 0.3s ease-in-out;

有人可以指向正确的库吗？

- dagda1

---

指南针的文档确实很糟糕。 - Toskan

Answer 1

使用 Compass 的 transition Mixin：

@include transition(all 0.3s ease-in-out);

- Joseph Silber

---

除了由Joseph链接的过渡效果外，如果你正在寻找动画效果，Eric Meyer有一个Compass Animation插件，需要Compass v0.13（目前是α版）。 - steveax

如果您想要针对特定的样式（我认为这更快），请使用@include transition(color 0.3s ease-in-out, background-color 0.3s ease-in-out); - Tisch

Answer 2

使用单个或“all”属性过渡创建动画的mixin

@include transition(PROPERTY DURATION DELAY(OPT) TIMING-FUNCTION)
@mixin transition($transition) {
  -webkit-transition: $transition;
     -moz-transition: $transition;
      -ms-transition: $transition;
       -o-transition: $transition;
          transition: $transition;
}

使用多个属性转换创建动画的混合器

@include multi-transition("PROPERTY DURATION DELAY(OPT) TIMING-FUNCTION, PROPERTY DURATION DELAY(OPT) TIMING-FUNCTION")
@mixin multi-transition($transition) {
 -webkit-transition: #{$transition};
    -moz-transition: #{$transition};
     -ms-transition: #{$transition};
      -o-transition: #{$transition};
         transition: #{$transition};
}

- Mo.

Answer 3

SASS混合器

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

@include transition(all 0.3s ease-in-out);

- Sony Mathew