css - CSS background-color过渡不适用于其他过渡

我有一个元素，当用户单击它时可以在两个类之间切换。在类之间更改的两个属性是margin和background-color。

当我仅将过渡添加到任一元素时，过渡效果很好，但是当我同时使用这两种过渡时，背景色则不起作用。我尝试为每个属性进行单独的转换，并将两个属性合并为一个转换，但是我无法使其正常工作。当我禁用边距过渡时，背景颜色过渡效果很好，但是一旦我再次启用边距过渡，背景颜色过渡就会停止工作。

这是我的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;
}

我尝试在线查找，但找不到过渡的任何限制。感谢您能获得的任何帮助。

最佳答案

您可以结合转换：

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

如果您有2个相等的属性，它们将被覆盖。另请注意，除非您要在活动状态和非活动状态之间进行不同的转换，否则不必给两个类相同的过渡。

关于css - CSS background-color过渡不适用于其他过渡，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51875234/