html - flex 容器内的每个 flex 元素在增长/收缩时是否可以有不同的过渡时间？

Question

我有一组在 :hover 上增长/收缩的 flex 元素 我的问题是，即使我指定每个动画都有自己的过渡时间，它们都需要相同的时间来完成动画。

是否可以解决此问题，否则我将不得不使用“显示: block ”并手动编码每个元素的大小？

<flex>
  <div class="item bg1" id="item-0"></div>
  <div class="item bg2" id="item-1"></div>
  <div class="item bg3" id="item-2"></div>
  <div class="item bg4" id="item-3"></div>
  <div class="item bg5" id="item-4"></div>
  <div class="item bg6" id="item-5"></div>
  <div class="item bg7" id="item-6"></div>
</flex>

body {
  margin: 0;
  overflow: hidden;
}

flex {
  margin-left: -5vw;
  display: flex;
  width: 110vw;
  height: 100vh;
  transform: skew(-10deg);
}

.item {
  flex: 1;
}

.item:hover {
  flex-grow: 3;
  max-width:45vw;
}

.bg1 {
  background: #442C59;
}
.bg2 {
  background: #844270;
}
.bg3 {
  background: #DC9A95;
}
.bg4 {
  background: #BEC976;
}
.bg5 {
  background: #CDCA98;
}
.bg6 {
  background: #B04127;
}
.bg7 {
  background: #6B4A4B;
}

// ITEM 0
$("#item-0").mouseover(function(){
  $(this).css({ transition: 'all 1s' });
  $("#item-1").css({    transition: 'all 1.2s' });
  $("#item-2").css({    transition: 'all 1.4s' });
  $("#item-3").css({    transition: 'all 1.6s' });
  $("#item-4").css({    transition: 'all 1.8s' });
  $("#item-5").css({    transition: 'all 2s' });
  $("#item-6").css({ transition: 'all 2.2s' });
});

// ITEM 1
$("#item-1").mouseover(function(){
  $("#item-0").css({ transition: 'all 1.2s' });
  $(this).css({ transition: 'all 1s' });
  $("#item-2").css({ transition: 'all 1.2s' });
  $("#item-3").css({ transition: 'all 1.4s' });
  $("#item-4").css({ transition: 'all 1.6s' });
  $("#item-5").css({ transition: 'all 1.8s' });
  $("#item-6").css({ transition: 'all 2s' });
});

// ITEM 2
$("#item-2").mouseover(function(){
  $("#item-0").css({ transition: 'all 1.4s' });
  $("#item-1").css({ transition: 'all 1.2s' });
  $(this).css({ transition: 'all 1s' });
  $("#item-3").css({ transition: 'all 1.2s' });
  $("#item-4").css({ transition: 'all 1.4s' });
  $("#item-5").css({ transition: 'all 1.6s' });
  $("#item-6").css({ transition: 'all 1.8s' });
});

// ITEM 3
$("#item-3").mouseover(function(){
  $("#item-0").css({ transition: 'all 1.6s' });
  $("#item-1").css({ transition: 'all 1.4s' });
  $("#item-2").css({ transition: 'all 1.2s' });
  $(this).css({ transition: 'all 1s' });
  $("#item-4").css({ transition: 'all 1.2s' });
  $("#item-5").css({ transition: 'all 1.4s' });
  $("#item-6").css({ transition: 'all 1.6s' });
});

// ITEM 4
$("#item-4").mouseover(function(){
  $("#item-0").css({ transition: 'all 1.8s' });
  $("#item-1").css({ transition: 'all 1.6s' });
  $("#item-2").css({ transition: 'all 1.4s' });
  $("#item-3").css({ transition: 'all 1.2s' });
  $(this).css({ transition: 'all 1s' });
  $("#item-5").css({ transition: 'all 1.2s' });
  $("#item-6").css({ transition: 'all 1.4s' });
});

// ITEM 5
$("#item-5").mouseover(function(){
  $("#item-0").css({ transition: 'all 2s' });
  $("#item-1").css({ transition: 'all 1.8s' });
  $("#item-2").css({ transition: 'all 1.6s' });
  $("#item-3").css({ transition: 'all 1.4s' });
  $("#item-4").css({ transition: 'all 1.2s' });
  $(this).css({ transition: 'all 1s' });
  $("#item-6").css({ transition: 'all 1.2s' });
});

//ITEM 6
$("#item-6").mouseover(function(){
  $("#item-0").css({ transition: 'all 2.2s' });
  $("#item-1").css({ transition: 'all 2s' });
  $("#item-2").css({ transition: 'all 1.8s' });
  $("#item-3").css({ transition: 'all 1.6s' });
  $("#item-4").css({ transition: 'all 1.4s' });
  $("#item-5").css({ transition: 'all 1.2s' });
  $(this).css({ transition: 'all 1s' });
});

这是一支笔 https://codepen.io/mateus-ramos/pen/RwbZKgy

Answer 1

正如用户 Temani Afif 所指出的，我想要实现的是 flex 显示无法实现的。 我已切换到 block 显示并“硬编码”每个大小和位置。

Temani Afif 对此发表了评论(以及评论部分的更多内容):

It woulld make no sense to have the element shrinking slowly and the one growing fast. The total width of all the element need to remain the same so they all need to have the same timing