CSS 背景颜色过渡不适用于其他过渡

Question

我有一个元素，当用户点击它时，它会在两个类之间切换。类之间变化的两个属性是边距和背景颜色。

当我只向一个元素添加过渡效果时，过渡效果很好，但是当我同时使用两种过渡效果时，背景色效果不佳。我尝试为每个属性进行单独的转换，并将两个属性组合在一个转换中，但我无法让它工作。当我禁用边距过渡时，背景颜色过渡工作正常，但是一旦我再次启用边距过渡，背景颜色过渡就停止工作。

这是我的 CSS:

.switch_Active {
    background-color: $not_selected;
    -webkit-transition: background-color 5000ms;
    -moz-transition: background-color 5000ms;
    -o-transition: background-color 5000ms;
    transition: background-color 5000ms;
    border-radius: 50%;
    height: 20px;
    margin-left: 45%;
    transition: margin-left 0.5s ease;
    width: 20px;
}

.switch {
    background-color: $selected;
    -webkit-transition: background-color 5000ms;
    -moz-transition: background-color 5000ms;
    -o-transition: background-color 5000ms;
    transition: background-color 5000ms;
    border-radius: 50%;
    height: 20px;
    margin-left: 50%;
    transition: margin-left 0.5s ease;
    width: 20px;
}

我尝试在线查找，但找不到任何转换限制。我很感激我能得到的任何帮助。

Answer 1

您可以组合转换：

transition: background-color 5000ms, margin-left 0.5s ease;

如果您有 2 个相同的属性，它们将被覆盖。另请注意，没有必要为 2 类提供相同的过渡，除非您希望在活动和非活动之间进行不同的过渡。

Answer 2

为避免重写，请使用它。因为 CSS 基本上会采用最后定义的属性.

.switch_Active {
    background-color: $not_selected;
    -webkit-transition: background-color 5000ms,  margin-left 0.5s ease;
    -moz-transition: background-color 5000ms,  margin-left 0.5s ease;
    -o-transition: background-color 5000ms,  margin-left 0.5s ease;
    transition: background-color 5000ms,  margin-left 0.5s ease;
    border-radius: 50%;
    height: 20px;
    margin-left: 45%;
    width: 20px;
}

.switch {
    background-color: $selected;
    -webkit-transition: background-color 5000ms, margin-left 0.5s ease;;
    -moz-transition: background-color 5000ms, margin-left 0.5s ease;;
    -o-transition: background-color 5000ms, margin-left 0.5s ease;;
    transition: background-color 5000ms, margin-left 0.5s ease;;
    border-radius: 50%;
    height: 20px;
    margin-left: 50%;
    width: 20px;
}

或者只是他们这样：

.switch_Active {
        background-color: $not_selected;
        -webkit-transition: background-color,  margin-left 0.5s ease;
        -moz-transition: background-color,  margin-left 0.5s ease;
        -o-transition: background-color,  margin-left 0.5s ease;
        transition: background-color,  margin-left 0.5s ease;
        border-radius: 50%;
        height: 20px;
        margin-left: 45%;
        width: 20px;
    }

    .switch {
        background-color: $selected;
        -webkit-transition: background-color, margin-left 0.5s ease;;
        -moz-transition: background-color, margin-left 0.5s ease;;
        -o-transition: background-color, margin-left 0.5s ease;;
        transition: background-color, margin-left 0.5s ease;;
        border-radius: 50%;
        height: 20px;
        margin-left: 50%;
        width: 20px;
    }

CSS 背景颜色过渡不适用于其他过渡

CSS background-color transition is not working with other transitions

css

background-color

transitions