Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.03.2021, 00:58
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

анимацыя но только при клике
Здравствуйте, я сделал маленькою анимацию
<!DOCTYPE html>

<body>
	<div id="myDiv" onclick="myClick()"></div>
</body>
<style>
	#myDiv {
		width: 20vmin;
		height: 20vmin;
		background: green;
		transition: height 1s ease;
	}

	#myDiv:active {
		background: blue;
	}
</style>
<script>
	function myClick() {
		document.getElementById("myDiv").style.height = Math.floor(Math.random() * 100) + "vmin";
	}
</script>

</html>

При клике квадратик с анимацией изменит высоту, но он также анимируется при изменении размера окна/масштаба. Как сделать так чтоб он анимировался только при клике, а в остальных случаях просто менял размеры (без анимации)

Последний раз редактировалось fori, 31.03.2021 в 01:03.
Ответить с цитированием
  #2 (permalink)  
Старый 31.03.2021, 09:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

transitionend
fori,
<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<body>
    <div id="myDiv" ></div>
<style>
    #myDiv {
        width: 20vmin;
        height: 20vmin;
        background: green;
    }
    #myDiv:active {
        background: blue;
    }
</style>
<script>
     let elem = document.getElementById("myDiv")
     elem.addEventListener( "click" , function(event) {
     elem.style.transition = "height 1s ease";
     elem.style.height = Math.floor(Math.random() * 100) + "vmin";
     });
     elem.addEventListener( "transitionend" , function(event) {
     elem.style.transition = "";
     });
</script>
</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике передать заголовок в инпут alex-tiesto Общие вопросы Javascript 2 18.03.2019 09:34
Закрытие меню при клике "Вне" Tipylja Общие вопросы Javascript 2 14.10.2018 21:40
Fancybox при клике на метку Яндекс.Карт не работает с параметрами imax57 jQuery 0 04.10.2014 09:18
скрыть открыть тот или иной блок при клике на ссылке ufaclub jQuery 7 26.08.2014 00:14
Dropdown, выпадающее меню при клике moslem jQuery 2 22.07.2013 17:20