Добавьте переход к сворачиваемому div, используя стилизованные компоненты в React

Я пытаюсь создать простой складной div, используя стилизованные компоненты в реакции.

Я могу заставить div открываться и закрываться в зависимости от состояния, но я не могу заставить переход работать. Он просто прыгает, чтобы открыть или закрыть.

Стилизованный компонент:

const Details = styled.div`
    transition: 0.3s ease-out;

    &.open {
        height: auto;
        padding: 25px 0;
    }

    &.closed {
        height: 0;
        overflow: hidden;
    }
`;

JSX

<Details className={this.state.detailsOpen ? 'open' : 'closed'}>
    {stuff}
</Details>

reactjs css styled-components
person user8467470    schedule 20.03.2018    source источник
comment
Вы не можете перейти с height на auto (вам также не хватает height в объявлении правила transition). Однако вы можете выполнить переход max-height, что является обычным обходным путем для этой цели, см.: stackoverflow.com/questions/3508605/   -  person Miguel Calderón    schedule 20.03.2018
comment
Поддерживают ли стилизованные компоненты sass, например, синтаксис &.open {?   -  person Tomasz Mularczyk    schedule 20.03.2018
comment
Спасибо, Мигель, я попробовал несколько подходов, используя этот совет, и поведение осталось прежним. Это потому, что я условно меняю класс «открытый» и удаляю его все вместе из стилизованного элемента?   -  person user8467470    schedule 20.03.2018

Ответы (1)


arrow_upward
9
arrow_downward

Как указано в комментариях, вам нужно будет использовать максимальную высоту, если вы хотите запустить анимацию. Поскольку вы используете styled-components, вероятно, лучше не полагаться на className и просто передать состояние в качестве реквизита непосредственно компоненту:

JSX

<Details open={this.state.detailsOpen}>
    {stuff}
</Details>

Стилизованный компонент

const Details = styled.div`
    max-height: ${props => props.open ? "100%" : "0"};
    overflow: hidden;
    padding: ${props => props.open ? "25px 0" : "0"};
    transition: all 0.3s ease-out;
`;

Я собрал пример в песочнице кода: https://codesandbox.io/s/1qrw632214

person Matt Waldron    schedule 20.03.2018
comment
Спасибо, Мэтт. Я играл с демо и отлично работает. Я до сих пор не могу перейти на работу. Просто прыгает, но, по крайней мере, я знаю, что это работает, поэтому буду отслеживать, что останавливает его в другом месте. - person user8467470; 21.03.2018
comment
Ничего страшного, удачи! Вы можете проверить любые непосредственные родительские элементы, которые также могут отображать/скрывать свойства, которые нельзя анимировать developer.mozilla.org/en-US/docs/Web/CSS/. - person Matt Waldron; 21.03.2018