Как реализовать плавное расширение и усечение текста с переходом в React? ⇐ CSS

[Anonymous]

Я работаю над компонентом React, в котором мне нужно показать сообщение о награде, которое может разворачиваться и сворачиваться в зависимости от взаимодействия с пользователем. Цель состоит в том, чтобы плавно расширять контент, когда пользователь нажимает «Читать больше», и плавно сворачивать его, когда он нажимает «Читать меньше». Кроме того, содержимое должно быть обрезано при сворачивании.
Однако у меня возникла проблема с применением плавных переходов при переключении между развернутым и свернутым состояниями. Вот чего я пытаюсь достичь:
Когда содержимое свернуто:
Содержимое должно быть усечено (с помощью зажима строки или аналогичного средства).
Высота должен быть анимирован, чтобы при сворачивании он выглядел плавно.
Когда содержимое развернуто:
Высота содержимого должна плавно увеличиваться, чтобы отображалось полное сообщение.
Усечение должно быть удалено и полное сообщение должно быть видно.
Проблема:
Основная проблема, с которой я столкнулся, заключается в том, что текст немедленно обрезается, даже до того, как произойдет свертывание перехода, а сам переход не является плавным.
Я пробовал использовать -webkit-line-clamp и max-height, но, похоже, это работает не так, как ожидалось, и усечение происходит слишком резко.
Вот код, который я пока пробовал:
tsx
`

Код: Выделить всё

export const Ellipsis = (textLineAmounts: number) => css`
display: -webkit-box;
display: -moz-box;
overflow: hidden;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-line-clamp: ${textLineAmounts};
-moz-line-clamp: ${textLineAmounts};
`;

export const ExpandableBodyRow = styled.div`
box-sizing: border-box;
display: flex;
max-height: ${props => (props.expanded ? `2000px` : `75px`)};
margin: ${({ theme }) => `0 ${theme.space.single}px ${theme.space.double}px`};
overflow: hidden;
transition: max-height 0.5s ease-in-out;
`;

interface AwardMessageProps {
isTruncated: boolean;
}

export const AwardMessage = styled.div`
${({ isTruncated }) => isTruncated && Ellipsis(3)}
color: ${({ theme }) => theme.color.default.primaryText};
`;

`
Для контейнера, содержащего тело, я разрешаю динамическое расширение:
tsx
Затем в компоненте:

Код: Выделить всё

    const standardAward: JSX.Element = (


{award?.awardMessage

ref={messageTextRef}
tabIndex={-1}
>
{award?.awardMessage}


}

{!isRestrictedAward && isTruncated && (

{award?.awardMessage && (

{expandButtonText}

)}

)}

);

Что я пробовал:Использовать -webkit-line-clamp для усечения. При развертывании или сворачивании переход не происходит плавно. Использование max-height для плавного перехода по высоте. Это работает для переход высоты, но не обрабатывает усечение плавно. Динамическое усечение на основе JavaScript. Но усечение происходит слишком быстро, вызывая скачок. Желаемое поведение: плавное расширение и свертывание. Усечение применяется только тогда, когда свернуто. Избегайте резких изменений при переключении между развернутым и свернутым. Буду очень признателен за любые предложения или примеры того, как реализовать плавные переходы как для расширения, так и для усечения контента.
Заранее спасибо !

Подробнее здесь: https://stackoverflow.com/questions/793 ... n-in-react