如何使用Compass将不透明度从0转换为1？

Question

我尝试使用CSS3构建淡入淡出样式（并且SASS / Compass可读）

我想让元素从完全透明变为完全不透明。 我尝试过类似的东西：

@import "compass/css3/transition";
@import "compass/css3/opacity";

.fade{
    @include transparent;
    @include transition(opacity(1), 2s ease-out);
}

通过尝试，没有过渡效果，元素保持透明......

Answer 1

如Compass documentation所示，您必须指定预期的伪元素。否则，浏览器将如何知道是否应该发生转换：悬停或其他一些操作。

此外，请勿在不透明度调用中包含(1)参数：

.fade{
  @include transparent;
  @include transition(opacity, 2s ease-out);
}

.fade:hover {
  opacity: 1;
}

Example

Answer 2

我终于使用了这个SASS mixin的SCSS版本：http://thecssguru.freeiz.com/animate/