如何在手触摸事件上启动动画？答案

【问题标题】：How to start animation on hand touch event?如何在手触摸事件上启动动画？
【发布时间】：2018-12-25 23:01:54
【问题描述】：

我需要在用户单击按钮时在进度条上开始动画，并在他将手指移开时结束动画。我怎样才能做到这一点？我不确定要使用什么：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>

【问题讨论】：

您的代码毫无意义。如果您希望得到任何有用的答案，您真的应该改进它......

标签： javascript html css

【解决方案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>

【讨论】：