没有名为 transition-duration 的 mixin

Question

我正在从 Bootstrap 3 迁移到 Bootstrap 4。所以我正在将 LESS 文件转换为 SCSS。我使用this 来转换我的文件。

但是，我得到的错误是：no mixin named transition-duration

charts.less

.mini-charts-item {
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    position: relative;
    margin-bottom: 30px;

    &:before {
        .transition(width);
        .transition-duration(500ms);
        .backface-visibility(hidden);
        content: "";
        width: 113px;
        height: 100%;
        background: rgba(0,0,0,0.1);
        position: absolute;
        left: 0;
        top: 0;
    }
}

charts.scss

.mini-charts-item {
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    position: relative;
    margin-bottom: 30px;

    &:before {
        content: "";
        width: 113px;
        height: 100%;
        background: rgba(0,0,0,0.1);
        position: absolute;
        left: 0;
        top: 0;
        @include transition(width);
        @include transition-duration(500ms);
        @include backface-visibility(hidden);
    }
}

Answer 1

'transition-duration' 不是 mixin。它是动画的内置 css 属性。您可以使用它而无需包含它。更多信息可以参考[此链接]。1