Как анимировать изменение высоты без определения высоты? ⇐ CSS

[Гость]

У меня есть элемент div, содержащий динамический текст.

Я не задавал высоту элемента div, поэтому его высота полностью зависит от длины текста.

При нажатии кнопки текст внутри элемента div меняется.

Я хочу иметь плавную анимацию «развертывания»/«свертывания» для изменения высоты элемента div без необходимости указывать фиксированную высоту.

Возможно ли вообще, чтобы угловая анимация анимировала высоту, если она нигде не указана и просто подразумевается/вычисляется?

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

Использование :leave или :enter или высоты 0 здесь также бесполезно, так как я хочу перейти от высоты x к высоте y, которые оба неизвестны и > 0.

Кроме того, я попробовал min-height/max-height, что тоже мало что дало...

ТС

@Component({ автономный: правда, селектор: 'app-animation-test', templateUrl: './animation.comComponent.html', styleUrls: ['./animation.comComponent.css'], анимации: [trigger('height--expand-shrink-vertical', [ состояние('свернуто', стиль({высота: '*', переполнение: 'скрыто' })), состояние('расширено', стиль({высота: '*', переполнение: 'скрыто' })), переход('расширено свернуто', animate('200 мс ускорение')), ]); ], }) класс экспорта AnimationComponent реализует OnInit { текст: строка; shortText = 'Краткий текст'; длинныйтекст = 'Длинный текст Длинный текст Длинный текст Длинный текст Длинный текст Длинный текст Длинный текст Длинный текст Длинный текст Длинный текст Длинный текст Длинный текст Длинный текст'; конструктор() { этот.текст = этот.короткийтекст; } нгОнинит() {} public toggleText(): void { this.text = this.text === this.shortText ? this.longText: this.shortText; } } HTML

Переключить текст {{текст}} Вот мой Stackblitz