时间戳

首页 > 解决方案 > 如何在引导弹性盒中使用 css 过渡？

css - 如何在引导弹性盒中使用 css 过渡？

问题描述

我正在尝试在悬停时向 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>

标签： cssbootstrap-4flexboxtransition

解决方案

您不能使用从自动到 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>

推荐阅读