анимацыя но только при клике
Здравствуйте, я сделал маленькою анимацию
<!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>
При клике квадратик с анимацией изменит высоту, но он также анимируется при изменении размера окна/масштаба. Как сделать так чтоб он анимировался только при клике, а в остальных случаях просто менял размеры (без анимации) |
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>
|
| Часовой пояс GMT +3, время: 01:52. |