Question

我需要在用户单击按钮时在进度条上启动动画，并在他将手指从其上移开时结束动画。我怎样才能做到这一点？我不确定该使用什么：onmousedown / onmouseup或一些触摸事件

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

Answer 1

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>

如何开始动画手触事件？

1 个答案: