Как при наведении сжимать и разжимать блок при этом в конце меняя содержимое?

Для достижения желаемого эффекта со сжатием и разжатием блока при наведении, а также изменением содержимого в конце, мы можем использовать HTML, CSS и JavaScript.

Сначала нам нужно создать базовую структуру HTML, содержащую блок и элементы, которые мы хотим показать при сжатии и разжатии блока, а также после завершения анимации. Например, следующий HTML-код:

<div id="container">
  <div id="block">
    <div id="content1">Содержимое 1</div>
    <div id="content2">Содержимое 2</div>
  </div>
  <div id="endContent">Конечное содержимое</div>
</div>

Затем мы добавим стили CSS для нашей структуры, чтобы создать эффект сжатия и разжатия блока при наведении:

#block {
  width: 200px;
  height: 200px;
  background-color: blue;
  color: white;
  text-align: center;
  transition: width 0.5s ease-in-out;
}

#block:hover {
  width: 100px;
}

#content2 {
  display: none;
}

#block:hover #content2 {
  display: block;
}

В этом CSS-коде мы указываем, что при наведении на блок его ширина должна измениться с 200 пикселей до 100 пикселей за 0,5 секунды с плавным переходом. Мы также скрываем элемент содержимого 2 (#content2) по умолчанию и делаем его видимым только при наведении на блок.

Теперь мы можем добавить JavaScript для изменения содержимого в конце анимации сжатия и разжатия блока:

var block = document.getElementById('block');
var endContent = document.getElementById('endContent');

block.addEventListener('transitionend', function() {
  if (block.offsetWidth == 100) {
    endContent.innerHTML = "Новое содержимое";
  } else {
    endContent.innerHTML = "Конечное содержимое";
  }
});

В этом JavaScript-коде мы добавляем слушатель события 'transitionend' к блоку. Внутри обработчика события мы проверяем текущую ширину блока (offsetWidth). Если ширина блока равна 100 пикселям, значит, анимация сжатия закончена, и мы изменяем содержимое элемента endContent на "Новое содержимое". В противном случае, если ширина блока не равна 100 пикселям, анимация разжатия еще не закончена, и мы возвращаем исходное содержимое "Конечное содержимое".

Итак, используя эту комбинацию HTML, CSS и JavaScript, мы можем создать эффект сжатия и разжатия блока при наведении, а также изменение содержимого в конце анимации.