Показать сообщение отдельно
  #29 (permalink)  
Старый 12.03.2019, 02:27
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Блондинка
...сайты https://jsfiddle.net и http://plnkr.co с телефона не откроешь, а каждый раз бегать к соседям, чтобы на компьютере посмотреть, так они просто пошлют.
Без разницы, смотреть в компьютере или планшете или телефоне... всё одинаково работает... Ещё есть https://codepen.io/pen

Сообщение от Блондинка
задача простая, есть див с анимацией, которая остановилась согласно прописанным условиям в стиле, надо сделать чтобы по клику на див анимация запускалась снова, чтобы не пользоваться браузерными кнопками
Можно удалить элемент из DOM, а затем вставить в то же самое место, это приведёт к повторному запуску анимации.

UPD

Пример... каждый раз, как нажимаете на кнопку, анимация запускается заново...
<button id="animation">abc</button>

<style>

#animation {
	all: unset;
	position: relative;
	font-size: 300%;
}

#animation::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 3px;
	background: red;
	left: 0;
	top: 0;
	animation: animation 1s;
}


@keyframes animation {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

</style>

<script>

document.addEventListener("click", event => {
	var target = event.target;
	var parentNode = target.parentNode;
	
	parentNode.replaceChild(target, target);
});

</script>


Скрипт удаляет и вставляет обратно любой элемент на странице, вы можете уточнить, к каким элементам применяется анимация!

Последний раз редактировалось Malleys, 12.03.2019 в 02:35.
Ответить с цитированием