Как сделать аккордеонное меню, используя реагирующие и стилизованные компоненты

Question

Я пытаюсь создать меню для аккордеона, например, из Bootstrap https://getbootstrap.com/docs/4.3/components/collapse/

Мне удалось заставить его открываться и закрываться нормально, но я отсутствует плавный переход: /

Это похоже на то, что переход просто не применяется.

import React, { useState } from 'react';
import styled from 'styled-components';
import { Button } from './common/button';

const AccordionWrapper = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--Secondary-color-dark);
    border-radius: 10px;
    height: auto;
    padding: 2%;
    text-align: center;
    transition: all 0.6s ease-in-out;
`;

const InternalWrapper = styled.div`
    width: 100%;
    max-height: ${(props) => (props.open ? '100%' : '0')};
    transition: all 1s ease-in-out;
    overflow: hidden;
`;

const Accordion = ({ title, subTitle, btnText }) => {
    const [ open, setOpen ] = useState(false);
    const handleClick = () => {
        setOpen(!open);
    };
    return (
        <AccordionWrapper>
            <h2>{title}</h2>
            <h3>{subTitle}</h3>
            <InternalWrapper open={open}>
                <h1>Hello</h1>
            </InternalWrapper>
            <Button padding="5px" onClick={handleClick}>
                {btnText}
            </Button>
        </AccordionWrapper>
    );
};

Accordion.defaultProps = {
    title    : 'title',
    subTitle : 'subtitle',
    btnText  : 'Read more >>'
};

export default Accordion;

Вот воспроизведение кода в ручке. https://codepen.io/hichihachi/pen/MWwKZEO?editors=0010

Любая помощь будет оценена, спасибо.

Answer 1

Переход на максимальную высоту не работает, если вы задаете его в процентах и ​​в некоторых других единицах. Чтобы этот переход работал, вы можете определить что-то вроде

max-height: ${(props) => (props.open ? '100px' : '0')};

https://codepen.io/alonabas/pen/PoqNYLR?editors=1111

Но если ваш контент имеет высоту более 100 пикселей , когда вы открываете Аккордеон, содержимое будет сокращено. В этом случае вы можете использовать jQuery для расчета точного размера вашего контента или использовать какое-либо максимально возможное значение max-height.

Обе опции описаны здесь: { ссылка }