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

Question

我有一个CSS类,悬停应该改变justify-content财产center,以flex-start与1秒的延迟.

所以一切正常,除了从justify-content.

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

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

Answer 1

您可以使用两个弹性项目来实现您的目标，其中过渡位于“flex”属性上。

.container {
  display: flex;
  justify-content: center;
  border: 1px solid gray;
}

.content {
  flex: 1;
  max-width: fit-content;
  border: 1px solid orangered;
}

.dummy {
  flex: 0;
  transition: flex 1s;
  border: 1px solid limegreen;
}

.container:hover .hovered {
  flex: auto;
}

<div class="container">

  <div class="content"> hover over me </div>
  
  <div class="dummy hovered" />
  
</div>

嘿，法布里西奥，本节是针对你的问题的。干杯

.container {
  display: flex;
  justify-content: center;
  border: 1px solid gray;
}

.content {
  width: fit-content;
  border: 1px solid orangered;
}

.dummy {
  transition: flex 1s;
  border: 1px solid limegreen;
}

.after {
  flex-grow: 1;
}

.before {
  flex-grow: 0;
}

.container:hover .before {
  flex-grow: 1;
}

<div class="container">

  <div class="dummy before" ></div>

  <div class="content"> hover over me </div>
  
  <div class="dummy after" ></div>
  
</div>

嘿，Robo，本节供您注意。Flex-grow 并不是唯一可能的方法。至少 flex-basis 也可以完成这项工作。我没有尝试过 flex-shrink 但也看到了这种可能性。

.container {
  display: flex;
  justify-content: center;
  border: 1px solid gray;
}
 
.content {
  max-width: fit-content;
  min-width: fit-content;
  border: 1px solid orangered;
}

.dummy {
  flex-basis: 0;
  transition: flex 1s;
  border: 1px solid limegreen;
}
  
.container:hover .dummy {
  flex-basis: 100%;
}

<div class="container">
  <div class="content">hover over me</div>
  <div class="dummy" />
</div>

Answer 2

justify-content不是一个可以过渡的财产.您可以在此处找到兼容属性的完整列表.所有未列出的属性应该只是捕捉到它们的新值.

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

#wrapper {
    position: relative;
}

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

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

请记住,这不适用于多个元素.