css - 在flexbox的justify-content属性上应用过渡

我有一个CSS类，将鼠标悬停时应将justify-content属性从center更改为flex-start，延迟为1s。

因此，除了justify-content之外，其他所有东西都可以正常工作并被延迟。

.menuItem:hover {
    transition-property: all;
    transition-delay: 1s;
    justify-content: flex-start;
}

难道我做错了什么？如果是这样，我如何实现该行为？

最佳答案

justify-content不是可转换的属性。您可以找到兼容属性here的完整列表。所有未列出的属性都应简单地捕捉到它们的新值。

如果碰巧只需要为单个元素设置动画，则可以尝试使用绝对定位。

#wrapper {
    position: relative;
}

#element {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: all 300ms;
}

#element:hover {
    left: 0;
    transform: translateX(0);
}

关于css - 在flexbox的justify-content属性上应用过渡，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39080958/