css – 在flexbox justify-content属性上应用转换

我有一个CSS类,在悬停时应将justify-content属性从center更改为flex-start,延迟为1秒.

所以一切正常,除了正当的内容之外,它们都被推迟了.

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

难道我做错了什么？如果是这样,我怎样才能实现这种行为？

解决方法

理由 – 内容不是可转换的财产.您可以找到兼容属性 here的完整列表.所有未列出的属性应该只是捕捉到它们的新值.

如果您只需要为单个元素设置动画,则可以尝试使用绝对定位.

#wrapper {
    position: relative;
}

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

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

Keep in mind that this will not work for multiple elements.

原文地址：https://www.jb51.cc/css/215886.html