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 个相同的属性，它们将被覆盖。另请注意，除非您希望在激活和非激活之间进行不同的转换，否则不必为这两个类提供相同的转换。