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

【问题标题】：How to make a transition of opacity from 0 to 1 with Compass?如何使用 Compass 将不透明度从 0 转换为 1？
【发布时间】：2014-07-05 11:11:39
【问题描述】：

我正在尝试使用 CSS3（以及可读的 SASS/Compass）构建淡入淡出样式

我想让元素从完全透明变为完全不透明。我尝试了类似的方法：

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

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

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

【问题讨论】：

标签： css sass css-transitions opacity compass-sass

【解决方案1】：

正如Compass documentation 所示，您必须指定预期的伪元素。否则，浏览器如何知道转换是否应该发生在 :hover 或其他操作上。

另外，不要在 opacity 调用中包含 (1) 参数：

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

.fade:hover {
  opacity: 1;
}

Example.

【讨论】：

感谢您的回答，这符合我提出问题的方式。但是，您的回答让我意识到我应该改用动画。我想重现一个淡入 onload 效果。

【解决方案2】：

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

【讨论】：