我需要在用户单击按钮时在进度条上开始动画，并在他将手指从按钮上移开时结束动画。我怎样才能做到这一点？我不确定使用什么:onmousedown/onmouseup 或一些 handtouch 事件
.wrapper {
width: 100px;
height: 100px;
position: absolute;
clip: rect(0px, 100px, 100px, 50px);
}
.circle {
width: 80px;
height: 80px;
border: 10px solid green;
border-radius: 50px;
position: absolute;
clip: rect(0px, 50px, 100px, 0px);
}
div[data-anim~=base] {
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function:linear;
}
.wrapper[data-anim~=wrapper] {
-webkit-animation-duration: 0.01s;
-webkit-animation-delay: 3s;
-webkit-animation-name: close-wrapper;
}
.circle[data-anim~=left] {
-webkit-animation-duration: 6s;
-webkit-animation-name: left-spin;
}
.circle[data-anim~=right] {
-webkit-animation-duration: 3s;
-webkit-animation-name: right-spin;
}
<div class="wrapper" data-anim="base wrapper">
<div class="circle" data-anim="base left"></div>
<div class="circle" data-anim="base right"></div>
</div>
<button></button>
最佳答案
onClick和onRelease按钮的基本事件可以通过以下方式实现:
start() 函数将在用户单击按钮时调用，stop() 函数将在用户释放单击(或移开手指)时调用
<html>
<script>
function start(){
changeStatus("Progress Started...");
}
function stop(){
changeStatus("Progress Completed!");
}
function changeStatus(status){
document.getElementById("status").innerText = status;
}
</script>
<button id="click" onmousedown="start()" onmouseup="stop()">ok</button>
<div id="status">Please click the button</div>
</html>关于javascript - 如何在手触摸事件上启动动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53923013/