如何仅在点击时制作 animation？
[英]How to make animation on click only?
问题描述
I made a small animation When clicked, the animated square will change its height, but it will also animate when the window size / scale is changed.
我做了一个小的 animation 点击时，动画方块会改变它的高度，但是当 window 大小/比例改变时它也会动画。 How to make it animate only when clicked, and in other cases just resize (no animation)如何使其仅在单击时设置动画，在其他情况下仅调整大小（无动画）
function myClick() { document.getElementById("myDiv").style.height = Math.floor(Math.random() * 100) + "vmin"; } #myDiv { width: 20vmin; height: 20vmin; background: green; transition: height 1s ease; } #myDiv:active { background: blue; }
<!DOCTYPE html> <body> <div id="myDiv" onclick="myClick()"></div> </body> </html>
3 个解决方案
解决方案1
2 2021-03-30 23:35:27
One method is to add a class with transition and remove it after animation finished:一种方法是添加带有转换的 class 并在 animation 完成后将其删除：
var timer; document.getElementById("myDiv").addEventListener("transitionend", function(e) { clearTimeout(timer); document.getElementById("myDiv").classList.toggle("clicked", false); }, false); function myClick() { clearTimeout(timer); document.getElementById("myDiv").classList.toggle("clicked", true); document.getElementById("myDiv").style.height = Math.floor(Math.random() * 100) + "vmin"; timer = setTimeout(function() { //backup plan document.getElementById("myDiv").classList.toggle("clicked", false); }, 2000); }
#myDiv { width: 20vmin; height: 20vmin; background: green; } #myDiv:active { background: blue; } #myDiv.clicked { transition: height 1s ease; }
<body> <div id="myDiv" onclick="myClick()"></div> </body>
Another method is to remove transition class when window is resized另一种方法是在调整 window 大小时删除过渡 class
function myClick() { document.getElementById("myDiv").classList.toggle("clicked", true); document.getElementById("myDiv").style.height = Math.floor(Math.random() * 100) + "vmin"; } window.addEventListener('resize', function() { document.getElementById("myDiv").classList.toggle("clicked", false); });
#myDiv { width: 20vmin; height: 20vmin; background: green; } #myDiv:active { background: blue; } #myDiv.clicked { transition: height 1s ease; }
<body> <div id="myDiv" onclick="myClick()"></div> </body>
解决方案2
0 2021-03-30 23:19:32
The only way I know is the listening window resize event.我知道的唯一方法是监听 window 调整大小事件。
We are removing the transition effect while resizing in here;我们在这里调整大小时移除了过渡效果；
const myDiv = document.getElementById("myDiv")
window.addEventListener('resize', () => {
myDiv.style.transition = "all 0s ease 0s"
});
But then you have to put the transition back when you click like this;但是当你像这样点击时，你必须把转换放回去；
function myClick() {
if(myDiv.style.transition === "all 0s ease 0s"){
myDiv.style.transition = "height 1s ease";
}
myDiv.style.height = Math.floor(Math.random() * 100) + "vmin";
}
解决方案3
0 2021-03-30 23:41:58
Here's one way.这是一种方法。 It's a bit crude but it works.这有点粗糙，但它有效。 The div only has an animate class while the animation is taking place, using a timer. div 只有一个animate class 而 animation 正在发生，使用计时器。 I made the timer longer than necessary and it turns yellow to make clear what's happening.我把计时器设置得比必要的长，它变成黄色以明确发生了什么。 I'm not sure if it can be done without a timer kludge.我不确定它是否可以在没有计时器的情况下完成。
let animateTimeout; function myClick() { let myDiv = document.getElementById("myDiv"); myDiv.style.height = Math.floor(Math.random() * 100) + "vmin"; myDiv.classList.add("animate"); clearTimeout(animateTimeout); animateTimeout = setTimeout(() => myDiv.classList.remove("animate"), 1500); } #myDiv { width: 20vmin; height: 20vmin; background: green; } #myDiv.animate { background: yellow; transition: height 1s ease; } #myDiv:active { background: blue; } <!DOCTYPE html> <body> <div id="myDiv" onclick="myClick()"></div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.