Как использовать CSS-переход с начальной загрузкой flexbox? - PullRequest
Новая
       19

Как использовать CSS-переход с начальной загрузкой flexbox?

0 голосов
/ 15 мая 2019

Я пытаюсь добавить задержку перехода в 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>

1 Ответ

0 голосов
/ 15 мая 2019

Нельзя использовать переход от автоматического перехода к ширине 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>
...