Как добавить анимацию div?

Question

[RuRoman]

Пытаюсь добавить анимацию для элемента div, при нажатии на кнопку, плавно сворачивать элемент до 5 строк, но не работает.

$(".content-more").animate({
  "-webkit-line-clamp": "5"
}, 1500);

при этом у самого блока стили

.content-more {
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  transition: all .7s;
}

Если попробовать просто сменить значение стиля, то все работает, но нет плавности

$(".content-more").css({
  "-webkit-line-clamp": "5"
});

Comments

[Ivan Ustûžanin]

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

если используется JS, то считайте высоту и анимируйте её, а не вот это вот всё

[Ankhena]

Поддерживаю комментарий выше.

Если что, 5 строк это 5 размеров шрифта умноженных на line-height с возможными корректировками на отступы и нюансы шрифта.
Т.е. решить всё можно на CSS, используя JS лишь для смены класса.

Answer 1

[ImagineTables]

А оно вообще анимируемое?

Вот тут, например, пишут, что нет: https://stackoverflow.com/questions/71085424/how-t...

В стандарте (https://drafts.csswg.org/css-overflow-4/#propdef-l...) этот вопрос обходят стороной:

Animation type: see individual properties

А далее, обратно на сепульки. ))

По ссылке на SO есть рабочие примеры, как добиться того же эффекта при помощи других свойств, плюс в стандарте показано, из каких трёх свойств можно собрать данное (чтоб уж полностью воспроизвести, если надо).