Question

下面是否有更好更简单的方法来编写不透明度的缓入效果？

CSS：

 .button-hover {
    font-family: arial black;
    font-size: 100px;
    color: #000;

    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    opacity: 1;
}

.button-hover:hover {
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    opacity: 0.5;
}

正如你所看到的那样，我重复这些行两次似乎并不理想：

    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;

HTML：

<div class="container">
    <a href="#" class="button-hover">HOVER ME</a>
</div>

jsfiddle

Answer 1

不要重复转换规则。 CSS pre-processors可以帮助提供商前缀，但您真的不需要（也不应该）重复{的转换声明{1}}。只需在元素的默认状态下将它们设置为一次，如下所示：

node_modules

:hover

Understanding CSS3 Transitions

Answer 2

SASS ＆amp; LESS 可以让您轻松上手。您可以使用 SASS＆amp; LESS Mixins 为此。

示例（SASS）：

/* Create a Mixin (SASS) */
@mixin transition($property, $time, $method) {
  -webkit-transition: $property $time $method;
  -moz-transition: $property $time $method;
  -ms-transition: $property $time $method;
  -o-transition: $property $time $method;
  transition: $property $time $method;
}

/* Include this Mixin (SASS) */
.button-hover:hover {
  @include transition(opacity, 1s, ease-in-out);
}

示例（LESS）：

/* Create a Mixin (LESS) */
.transition(@property, @time, @method) {
  -webkit-transition: @arguments;
  -moz-transition: @arguments;
  -ms-transition: @arguments;
  -o-transition: @arguments;
  transition: @arguments;
}

/* Include this Mixin (LESS) */
.button-hover:hover {
  .transition(opacity, 1s, ease-in-out);
}

这将转换为 CSS ：

.button-hover:hover {
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

有关 SASS 的更多信息， LESS

Answer 3

这些是浏览器支持所需的前缀。您可以看到here哪些浏览器版本需要前缀，并根据您要支持的浏览器决定是否可以删除它们。

例如，-moz-前缀适用于Firefox，您可以在Firefox 16中看到它不再需要，因此您可以使用transition而不是-moz-用于Firefox 16 +。< / p>

详细了解前缀here。

CSS3悬停不透明度的缓入效果？

3 个答案: