Форум

fori · #1 (**permalink**) 31.03.2021, 00:58

Здравствуйте, я сделал маленькою анимацию

<!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>

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

рони · #2 (**permalink**) 31.03.2021, 09:25

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>

Форум

Справочник

Discord чат

Курсы javascript