Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.12.2021, 10:26
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 403

Синхронизация animation css и setTimeout
Добрый день. Есть анимация на css:
<div class="notice__close" x-show="item.closable" :style="`--anim:${item.anim}`" style="--anim:url(&quot;data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cstyle%3ecircle %7b animation: 8000ms iixiv linear;%7d%40keyframes iixiv %7bfrom%7bstroke-dasharray:0 100%7dto%7bstroke-dasharray:100 0%7d%7d%3c/style%3e%3ccircle cx='12' cy='12' r='11' stroke='%23000' stroke-opacity='.2' stroke-width='2'/%3e%3c/svg%3e&quot;)"></div>
<style>
.notice__close {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m12 4-8 8M4 4l8 8' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
	background-size: 16px;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	margin-right: -0.5rem;
	position: relative;
	width: 24px;
	height: 24px;
}
.notice__close:before {
	content: '';
	position: absolute;
	background-image: var(--anim);
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 100%;
	box-shadow: inset 0 0 0 2px rgb(0 0 0 / 5%);
	width: 100%;
	height: 100%;
	margin: auto;
	transform: rotate(-90deg);
}
</style>


Мне нужно добавить событие после завершения анимации. Юзаю setTimeout:
<script>
setTimeout( () => {
	alert( 'Твой выход!' );
}, 8000 )
</script>


Проблема в том, что происходит рассинхрон. Сообщение выводится с задержкой. Подскажите, как это побороть?
addEventListener('animationend')
использовать не могу, так как сложно получить доступ к элементу.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
CSS animation математический маятник Блондинка (X)HTML/CSS 33 20.03.2019 21:28
отменить animation: для класса Black_Star (X)HTML/CSS 6 28.10.2016 10:06
css animation height ekkl-82 (X)HTML/CSS 17 30.10.2015 09:22
JQuery CSS анализатор javascript jQuery 2 15.08.2010 20:27
Подскажите по CSS меню Александр_1988 Элементы интерфейса 1 17.05.2010 10:58