css - 如何将 css transition 与 bootstrap flexboxes 一起使用？

Question

我正在尝试在悬停时向 flexbox 添加一些过渡延迟。但是我的代码似乎有问题。

.flex-fill {  
transition-delay: 250ms !important;
transition:flex 0.5s ease-out !important;
}
.flex-fill:hover {width:60% !important;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="d-flex">
  <div class="p-2 flex-fill bg-light">Flex item</div>
  <div class="p-2 flex-fill bg-success text-white">Flex item with a lot of content</div>
  <div class="p-2 flex-fill bg-dark text-white">Flex item</div>
  <div class="p-2 flex-fill bg-info text-white">Flex item</div>
</div>

Answer 1

您不能使用从自动到 60% 宽度之间的过渡。尝试将原始宽度更改为 100%。并将过渡样式更改为

transition: width 0.5s ease-out !important;

.flex-fill {
  transition-delay: 250ms !important;
  transition: width 0.5s ease-out !important;
  width: 100%;
}

.flex-fill:hover {
  width: 160% !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />


<div class="d-flex">
  <div class="p-2 flex-fill bg-light">Flex item</div>
  <div class="p-2 flex-fill bg-success text-white">Flex item with a lot of content</div>
  <div class="p-2 flex-fill bg-dark text-white">Flex item</div>
  <div class="p-2 flex-fill bg-info text-white">Flex item</div>
</div>