Событие для того, когда пользователь переключает вкладки браузера

Для чисто CSS-решения, которое анимирует max-height, у которого нет большой задержки, я бы посоветовал установить разумное значение max-height при наведении, где-то около 500 пикселей или примерно или чуть больше, чем высота большинства элементы, которые вы хотите анимировать, имеют большую прокрутку содержимого путем установки overflow-y в auto после завершения анимации с задержкой 0,5 с.

Затем установите время перехода около 0,3 с (или немного медленнее, если расширение приведет к перемещению другого контента на вашей странице) с экспоненциальной кривой кубического безье при открытии и упрощением - в кривой кубического Безье и несколько быстрее при закрытии, например, 0,15 с, например, когда люди отбрасывают что-то со страницы, они, как правило, не хотят ждать, пока они не исчезнут.

Эти быстрые анимации будут по-прежнему видны пользователю и сводят к минимуму эффект любой задержки максимальной высоты, вызывающей замедление работы вашей страницы.

Код будет выглядеть примерно так:

#child0 {
  max-height: 0;
  overflow-y: hidden;
  background-color: #dedede;
  -webkit-transition: max-height 0.15s cubic-bezier(0.7, 0, 1, 0.5), overflow-y 0s linear 0s;
  -moz-transition: max-height 0.15s cubic-bezier(0.7, 0, 1, 0.5), overflow-y 0s linear 0s;
  -o-transition: max-height 0.15s cubic-bezier(0.7, 0, 1, 0.5), overflow-y 0s linear 0s;
  transition: max-height 0.15s cubic-bezier(0.7, 0, 1, 0.5), overflow-y 0s linear 0s;
}
#parent0:hover #child0 {
  max-height: 500px;
  overflow-y: auto;
  -webkit-transition: max-height 0.3s cubic-bezier(0.1, 0.9, 0.2, 1), overflow-y 0s linear 0.3s;
  -moz-transition: max-height 0.3s cubic-bezier(0.1, 0.9, 0.2, 1), overflow-y 0s linear 0.3s;
  -o-transition: max-height 0.3s cubic-bezier(0.1, 0.9, 0.2, 1), overflow-y 0s linear 0.3s;
  transition: max-height 0.3s cubic-bezier(0.1, 0.9, 0.2, 1), overflow-y 0s linear 0.3s;
}