Запрет новой анимации до ее окончания?

Question

[liltrill]

Всем привет, у меня есть tool-tip, который анимировано появляеться через 1s при наведении мышки, реализовал я это через hover:

&:hover {
    --tool-tip-indent: 4px;
    --tool-tip-opaticy: 1;
    --tool-tip-delay: 1s;
  }

Но если убрать мышку и быстро навести то tool-tip застывает на месте на пол пути к исчезновению, и через 1s начинает появлятся с того места где застыл.

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

Comments

[Rustam Bainazarov]

Это (ждать окончания transition) невозможно сделать через CSS. Только на JS:
https://jonsuh.com/blog/detect-the-end-of-css-anim...

Там же есть и пример, как это можно реализовать.

[liltrill]

Рустам Байназаров, Спасибо, круто, посмотрел, как считаете вешать на документ событие мыши (передвижение) (делегирование) не повлияет сильно на производительность? Пытаюсь нагуглить и не могу что то

[Rustam Bainazarov]

liltrill, нет, всё будет нормально. На страницах обычно десятки таких слушателей — и всё нормально, как видите. Вот тот же Toster а качестве примера.

[liltrill]

Рустам Байназаров, Понял, спасибо =)