CSS ширина перехода не работает с flex - PullRequest
Новая
       26

CSS ширина перехода не работает с flex

1 голос
/ 27 мая 2019

Компоновка: 

<div style={{ flex:1 }}>
    <div className="sideBarContainer">
         <div className="sideBar">
         <div className="sideBarExtra"> <--- conditional
    </div>
    <div className="content"></div>
</div>

CSS: 

.sideBarContainer {
    display: flex;
    flex-direction: row;
}
.sideBar {
    height: 100vh;
    min-width: 64px;
    z-index: 99;
}
.content {
    flex: 1;
    transition: width .3s linear;
}

sideBarExtra условно выполняет рендеринг с использованием компонента CSSTransitionGroup группы реагирования-передачи.

SideBarExtra будет плавно скользить слева направо при рендеринге и выдвигаться справа налево при его удалении.

При добавлении sideBarExtra содержимое div не плавно переходит на другую точку.

Ожидаемое поведение: содержимое плавно перемещается к новой ширине.

В инструментах консоли разработчика я вижу изменение ширины контента, но анимация перехода не происходит.

1 Ответ

1 голос
/ 27 мая 2019 

.sideBarContainer {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.sideBar {
    background: red;
    height: 100vh;
    min-width: 64px;
    z-index: 99;
}

.content {
    width: 10%;
    height: 100vh;
    background: yellow;
    transition: width .3s linear;
}
.content:hover {
  width: 80%;
}
<div style="display:flex;">
    <div class="sideBarContainer">
         <div class="sideBar">
         <div class="sideBarExtra"> </div>
    </div>
    <div class="content">Hover me</div>
</div>

Вы можете изменить момент 

.content {
    flex: 1;
    transition: width: .3s linear;
}

на 

.content {
    flex: 1;
    transition: width .3s linear;
}

переход не займет : Двоеточие здесь приведенный выше код

Answare 2

Вы также можете установить анимацию для свойства flex в следующем примере:

.sideBarContainer {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.sideBar {
    background: red;
    height: 100vh;
    min-width: 64px;
    z-index: 99;
    flex: 2;
    transition: flex .3s linear;
}

.content {
    flex: 1;
    height: 100vh;
    background: yellow;
    transition: flex .3s linear;
}
.sideBarContainer:hover .sideBar { 
  flex: 1;
}
.sideBarContainer:hover .content {
  flex: 2 0 auto;
}
<div style="display:flex;">
    <div class="sideBarContainer">
         <div class="sideBar">
         <div class="sideBarExtra"> </div>
    </div>
    <div class="content">Hover me</div>
</div>
...