Как вызвать javascript перед CSS переходом?

Question

У меня есть элемент, ширина которого увеличивается при наведении на него другого элемента, например

.div2 {
  width: 0px;
  display: none;
  transition: width 2s;
}

.div1:hover ~ .div2 {
  width: 100px;
}

. Я хочу изменить отображение на блокировку при наведении курсора, но до перехода CSS. Затем, аналогично, я хочу изменить отображение обратно на ноль после завершения перехода CSS. Я попытался использовать .onmouseover, чтобы установить блокировку дисплея, но он установил его после перехода CSS.

Есть ли способ установить блокировку дисплея до перехода CSS?

Answer 1

Как я понял ваш вопрос, у вас может быть два класса: один для скрытого (отображение: нет) и другой для визуально скрытого (может быть видимость: скрытый). При наведении курсора используйте визуально скрытый класс, чтобы получить эффект перехода css (воспользуйтесь помощью JavaScript, чтобы добавить этот класс). Вы должны воспользоваться помощью setTimeout здесь (10 Ms), можно добавить другой класс, который фактически реализует переход css. когда он обнаружен, вам нужно снова использовать logi c. надеюсь, это поможет