CSS转换在悬停时起作用，但在添加类时不起作用

Question

我有一个简单的锚点按钮：

<a href="/our-news" class="SectionNavButton">
    <span class="SectionNavButton-Inner">
</a>

我希望SectionNavButton-Inner的背景颜色在其父SectionNavButton悬停/关闭以及向其添加active类（父级）时进行转换。< / p>

我的萨斯：

.SectionNavButton
{
    .SectionNavButton-Inner
    {
        @include transition(background 0.4s ease-in-out);
        background: $style-default-link-color;
    }

    &:hover,
    &.active
    {
        .SectionNavButton-Inner
        {
            background: $style-default-link-hover-color;
        }
    }
}

这适用于悬停，但是当我向active添加SectionNavButton类时，没有转换（尽管背景颜色确实发生了变化）。

当我向active添加SectionNavButton课程时为什么没有转换？