Question

我尝试做的是将transition应用于已应用active类的元素。基本上我试图不复制我的SCSS（尽管我知道它会在编译后复制到CSS中）。所有active类都会更改三角形的bottom-border-color。

> li {

    &:after {
        position: absolute;
        content: '';
        border-bottom: 30px solid transparent;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        bottom: -100px;
        left: 50%;
        @include transform(0, -50%);
        @include transition(border-bottom-color .3s ease-in);

        &.active {  // this obviously doesn't work - nor does &.active:after
            border-bottom-color: $color-bg-green;
        }
    }
}

Answer 1

我认为需要写成如下。我认为您不能将.active内的:after类链接起来。

> li {

    &:after {
        position: absolute;
        content: '';
        border-bottom: 30px solid transparent;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        bottom: -100px;
        left: 50%;
        @include transform(0, -50%);
        @include transition(border-bottom-color .3s ease-in);
    }    

    &.active:after {
        border-bottom-color: $color-bg-green;
    }

    /** alternative if you have properties to set for .active **/
    &.active {
      someProperty: someValue;

      &:after {
        border-bottom-color: $color-bg-green;
      }
    }
}

SCSS psuedo：之后和＆＃34; class＆＃34;用＆符号

1 个答案: