Question

我正在尝试在Rails中的一些引导链接中添加一个简单的CSS动画，但我遇到了一些麻烦。这是什么打破了：

$link-color-hover:
rgba(85, 85, 85, .3);
:hover, :focus, :active {
-webkit-transition-delay: 0s;
-webkit-transition-duration: 0.5s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease;
color: darken(#777, 50%);
}

这里有什么帮助吗？这甚至可能吗？

Answer 1

试试这样：

    @mixin hovertransition {
        $link-color-hover: rgba(85, 85, 85, .3);
        color:$link-color-hover;

        -webkit-transition-delay: 0s;
        -webkit-transition-duration: 0.5s;
        -webkit-transition-property: all;
        -webkit-transition-timing-function: ease;

        &:hover, &:focus, &:active {
            color: darken(#777, 50%);
        }

    }

.transition-link
{
    @include hovertransition;
}

HTML

<a href="#" class="transition-link">Test me</a>

你不需要定义一个新的mixin，这只是为了清理东西。在触发转移之前，转换是在元素的声明中定义的。 P.s不要忘记其他前缀。

以下是演示：http://jsfiddle.net/Wzagr/

Answer 2

所以我想通了...... 我过于复杂了，显然我只需要找到与我试图做的相符的Bootstrap属性。

另外，我改变了“@import bootstrap”的位置，这解决了我几乎立即遇到的其他一半问题，所以请确保你的位置正确！

<强> SASS：

.navbar-right li:hover {
    background-color: #95a5a6;
    color: rgba(85, 85, 85, .3);
    &:hover, &:focus, &:active {
      -webkit-transition-delay: 0s;
      -webkit-transition-duration: 0.5s;
      -webkit-transition-property: all;
      -webkit-transition-timing-function: ease;
       color: darken(#777, 50%);
    }
}

HTML输出在这里：

http://jsfiddle.net/kgLPd/

如何在SASS中使用CSS动画？

2 个答案: