在 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;
}

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

原文由 Golan Kiviti 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 .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>

嘿，Fabricio，本节是针对您的问题。干杯

 .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>

原文由 Rich 发布，翻译遵循 CC BY-SA 4.0 许可协议