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

Макет:

<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 будет плавно скользить слева направо при рендеринге и скользить справа налево при удалении.

Div содержимого не переходит плавно при добавлении sideBarExtra, он перескакивает на свои места.

Ожидаемое поведение: для плавного перехода к новой ширине.

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

Мы как-то упускаем из виду, что React.js принимает className вместо class для приема стилей?

— 27.05.2019 12:55

Я просто переписал здесь код для удобочитаемости, я не хотел вставлять все компоненты, так как они представляют собой несколько файлов. Код использует className, но я его отредактирую

— 27.05.2019 13:40

html css flexbox react-transition-group

27.05.2019 12:48

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

2 604

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

.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;
}

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

Ответ 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>

вы можете еще раз просмотреть мой ответ, пожалуйста

— 28.05.2019 07:02

27.05.2019 14:31